Show theme settings Shopping cart Download trialFree Trial
Change Theme Settings
Change Theme Settings
Show All Themes

Custom Toolbar Items

  • Undo (Ctrl+Z)
  • Redo (Ctrl+Y)
  • Bold (Ctrl+B)
  • Italic (Ctrl+I)
  • Underline
  • Strikethrough
  • v
  • Smile
  • v

This demo illustrates how you can extend the MVC HTML Editor's toolbar with custom items and implement item-specific functionality.

In addition to standard items available within built-in toolbars, the HTML Editor allows you to add custom items and provide specific functionality for them. The following custom item types are shipped with the MVC HTML Editor:

  • Combo Box (ToolbarComboBox item). A combo box provides a standard dropdown list of individual items. In this demo, you can apply a specific font size to the currently selected content by picking an appropriate combo box item.
  • Dropdown Item Picker (ToolbarDropDownItemPicker item). A dropdown item picker represents a button with a dropdown and contains a list of selectable items. To select an item, users can hover the mouse pointer over a button or click it to activate its dropdown list and then select an item within the list. In this demo, you can insert smilies within the editor via a dropdown item picker.
  • Dropdown Menu (ToolbarDropDownMenu item). A dropdown menu item represents a button that displays a dropdown menu when clicked. In this demo, you can insert the current date and time into the editor by selecting the desired date/time format within the dropdown menu.

To ensure ease of use, these item types provide a common API. Open the demo's Code page to see how you can populate dropdown lists with items and respond to item clicks.

Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
Open CS Solution
The source code files for this demo are installed (by default) in the following directory:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxHTMLEditorDemos