Custom Toolbar Items

• Aug 01, 2019
• 2 minutes to read

In addition to the default toolbar items that allow end-users to perform specific predefined actions, the ASPxHtmlEditor‘s toolbars can be extended with toolbar items providing custom functionality and content. To accomplish this, you can use the following custom toolbar items shipped with the ASPxHtmlEditor.

Item	Image	Corresponding class	Description
Button		CustomToolbarButton	A button that allows you to perform custom actions when clicked.
Combo Box		ToolbarComboBox	A dropdown list with a choice of selectable items - much like a standard combo box. Online demo: Combo Box
Dropdown Menu		ToolbarDropDownMenu	A button that displays a dropdown menu when clicked. Online demo: Drop-down Menu
Dropdown Item Picker		ToolbarDropDownItemPicker	A button with a dropdown, containing a list of items available for selection. To select an item, users can hover the mouse pointer over a button or click it, to open its dropdown list and then select an item in the list. Online demo: Drop-down Item Picker

Example

This example demonstrates how to create a custom toolbar with different types of custom toolbar items in the ASPxHtmlEditor.

A toolbar item’s CommandName property specifies the name of the command that is executed by this item. The custom command logic is implemented in the ASPxClientHtmlEditor.CustomCommand event handler.

JS

function OnCommandExecute(s, e) {
     var value = e.parameter;
     switch (e.commandName) {
          case "InsertTemplate":
               InsertTemplate(value);
               break;
          case "InsertSmiley":
               InsertSmiley(value);
               break;
          case "InsertCustomer":
               InsertCustomer(value);
               break;
          case "DeleteAll":
               s.SetHtml(' ');
               break;
     }
}

function InsertTemplate(value) {
     HtmlEditor.GetSelection().SetHtml(value + " ");
}

function InsertSmiley(value) {
     var selection = HtmlEditor.GetSelection();
     var valueInfo = value.split("#");
     selection.SetHtml("<img style='margin-bottom:-2px;' src='../Content/Smilies/" + valueInfo[0] + ".png' alt='" + valueInfo[2] + "' title='" + valueInfo[1] + "' />");
}

function InsertCustomer(value) {
     HtmlEditor.GetSelection().SetHtml(value);
}

ASPX

<dx:ASPxHtmlEditor ID="HtmlEditor" runat="server">
     <ClientSideEvents CustomCommand="OnCommandExecute " />
     <Toolbars>
          <dx:HtmlEditorToolbar Name="myCustomToolbar">
               <Items>
                    <dx:ToolbarDropDownMenu BeginGroupField="BeginGroup" CommandName="InsertTemplate" DataSourceID="MenuDataSource" TextField="Name" ToolTip="Insert Template" TooltipField="ToolTip" ValueField="Text">
                         <Image IconID="support_template_16x16">
                         </Image>
                    </dx:ToolbarDropDownMenu>
                    <dx:ToolbarDropDownItemPicker CommandName="InsertSmiley" DataSourceID="ItemPickerDataSource" ImageUrlField="ImageUrl" ToolTip="Insert Smiley" TooltipField="Tooltip" ValueField="Value">
                    </dx:ToolbarDropDownItemPicker>
                    <dx:ToolbarComboBox CommandName="InsertCustomer" DefaultCaption="Customers" ToolTip="Insert Customer">
                         <PropertiesComboBox DataSourceID="ComboBoxDataSource" TextField="Name" ValueField="Name">
                         </PropertiesComboBox>
                    </dx:ToolbarComboBox>
                    <dx:CustomToolbarButton CommandName="DeleteAll" Text="Delete All">
                    </dx:CustomToolbarButton>
               </Items>
          </dx:HtmlEditorToolbar>
     </Toolbars>
</dx:ASPxHtmlEditor>

<asp:XmlDataSource ID="MenuDataSource" runat="server" DataFile="~/App_Data/MenuData.xml"
     TransformFile="~/App_Data/MenuData.xslt" XPath="//Templates/*" />
<asp:XmlDataSource ID="ItemPickerDataSource" runat="server" DataFile="~/App_Data/ItemPickerData.xml"
     XPath="//Smilies/*" />
<asp:XmlDataSource ID="ComboBoxDataSource" runat="server" DataFile="~/App_Data/ComboBoxData.xml"
     XPath="//Customers/*" />