Ribbon Toolbar
- 2 minutes to read
The ribbon toolbar is displayed in the ASPxHtmlEditor when the ASPxHtmlEditor.ToolbarMode property is set to Ribbon.
The ASPxHtmlEditor stores ribbon tabs in its ASPxHtmlEditor.RibbonTabs collection. This collection is represented by an instance of the HtmlEditorRibbonTabCollection class, and allows individual tabs (descendants of the RibbonTab class) to be added, deleted and accessed using indexer notation.
A ribbon tab displays ribbon items that are divided into logical groups. The RibbonTab object provides a collection of groups accessible by the RibbonTab.Groups property. An individual group is represented by the RibbonGroup class. A group provides a collection of items contained in the RibbonGroup.Items property. Ribbon items are represented by the RibbonItemBase class descendants.
Context Tabs
A context tab is a hidden ribbon tab that is displayed when a corresponding element (such as an image or a table) is selected. One element can correspond to several context tabs. Therefore, the tabs are combined into categories. The collection of categories is accessible by the ASPxHtmlEditor.RibbonContextTabCategories property. Every category provides the RibbonContextTabCategory.Tabs collection containing context tabs. You can specify a category color using the RibbonContextTabCategory.Color property. To manually change a category’s visibility based on a selected element, use the ASPxClientHtmlEditor.SetRibbonContextTabCategoryVisible method.
Tip
You can modify ribbon tabs, groups and items at design time using the ASPxHtmlEditor Designer.
Default Ribbon Tabs
Default tabs contain predefined sets of ribbon items, grouped by functionality. The ASPxHtmlEditor provides the following default tabs - Home, Insert, and View.
- Home tab - contains items that provide quick shortcuts to many frequently used operations (such as clipboard operations, undo/redo operations, changing the text’s font and style, etc.)
- Insert tab - contains items that provide access to the link dialogs, image dialogs, and Insert Table button.
- View tab - contains an item allowing end-users to switch ASPxHtmlEditor to full-screen mode.
Default Context Tabs
By default, the ASPxHtmlEditor provides a Layout context tab that contains table-related commands and is displayed when a cursor is in a table.
To quickly add all default tabs to the editor at runtime, call the following methods.
- To add default ordinary tabs, use the ASPxHtmlEditor.CreateDefaultRibbonTabs or HtmlEditorRibbonTabCollection.CreateDefaultRibbonTabs method.
- To add default context tabs, use the ASPxHtmlEditor.CreateDefaultRibbonContextTabCategories or HtmlEditorRibbonContextTabCategoryCollection.CreateDefaultRibbonContextTabCategories method.