Ribbon Toolbar

• Jan 14, 2022
• 2 minutes to read

The ribbon toolbar is displayed in the ASPxHtmlEditor when the ASPxHtmlEditor.ToolbarMode property is set to Ribbon.

The ASPxHtmlEditor.RibbonTabs property allows you to access the collection of ribbon tabs. This collection is the HtmlEditorRibbonTabCollection class instance. To access, add, or delete an individual tab (a RibbonTab class descendant), you can use its index.

A ribbon tab displays ribbon items that are divided into logical groups. To access the RibbonTab object’s group collection, use the RibbonTab.Groups property. An individual group is a RibbonGroup class instance. A group contains an item collection. Use the RibbonGroup.Items property to access this collection. An item is a RibbonItemBase class descendant.

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. Since one element can correspond to multiple context tabs, tabs are combined into categories. To access the collection of categories, use the ASPxHtmlEditor.RibbonContextTabCategories property.

Every category contains the collection of context tabs. Use the RibbonContextTabCategory.Tabs property to access this collection. To specify a category color, use the RibbonContextTabCategory.Color property. To manually change a category’s visibility based on a selected element, use the ASPxClientHtmlEditor.SetRibbonContextTabCategoryVisible method.

Tip

You can use the ASPxHtmlEditor Designer to modify ribbon tabs, groups, and items at design time.

Default Ribbon Tabs

Default tabs contain predefined sets of ribbon items, grouped by functionality. ASPxHtmlEditor displays the following default tabs:

• Home tab - Contains items that have shortcuts to many frequently used operations (such as clipboard operations, undo/redo operations, text font and style changes, and so on).
• Insert tab - Contains items that provide access to the link dialogs, image dialogs, and Insert Table button.
• View tab - Contains an item that allows users to switch ASPxHtmlEditor to full-screen mode.

Default Context Tabs

ASPxHtmlEditor has the Layout context tab that contains table-related commands. The control displays this default context tab when a cursor is in a table.

At runtime, call the following methods to add all default tabs to the editor:

• 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.