ASPxClientHtmlEditor.CommandExecuted Event
Occurs after a default or custom command has been executed on the client side.
Declaration
CommandExecuted: ASPxClientEvent<ASPxClientHtmlEditorCommandEventHandler<ASPxClientHtmlEditor>>Event Data
The CommandExecuted event's data class is ASPxClientHtmlEditorCommandEventArgs. The following properties provide information specific to this event:
| Property | Description |
|---|---|
| commandName | Gets the name of the processed command. |
| parameter | Gets an optional parameter that complements the processed command. |
Remarks
Handle the CommandExecuted event to perform specific client actions after a command has been executed within the ASPxHtmlEditor. You can, for instance, save the editor’s modified content to a specific location by handling this event.
Example
ASPxHtmlEditor allows you to provide custom toolbar buttons and modify the functionality of default buttons.
In this example, two custom buttons and corresponding shortcuts are created: Clear and Add Signature. When a button is clicked or shortcut is pressed, the ASPxClientHtmlEditor.CustomCommand event is triggered. In the event handler, the default select all and delete commands are executed using the ASPxClientHtmlEditor.ExecuteCommand method.
Additionally, we have modified the functionality of the default insert ordered list command. In the ASPxClientHtmlEditor.CommandExecuted event handler, which is triggered after the command is processed, we change the type of ordered list markers to Roman numerals.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/aspxhtmleditor-how-to-implement-custom-toolbar-buttons-and-modify-default-button-functiona-t283558
<script type="text/javascript">
var MailSignature = '<p>Thanks,</p><p> Max Bing</p>';
function onCustomCommand(commandName) {
switch (commandName) {
case ('clear'):
HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.SELECT_ALL, null);
HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.DELETE_COMMAND, null);
break;
case ('addSignature'):
var HtmlWithSignature = HtmlEditor.GetHtml() + MailSignature;
HtmlEditor.SetHtml(HtmlWithSignature);
break;
}
}
function onCommandExecuted(e) {
if (e.commandName == 'insertorderedlist') {
var html = HtmlEditor.GetHtml();
html = html.replace(/<ol>/g, "<ol type='I'>");
HtmlEditor.SetHtml(html);
}
}
</script>
<dx:ASPxHtmlEditor ID="DemoHtmlEditor" ClientInstanceName="HtmlEditor" runat="server">
<Toolbars>
<dx:HtmlEditorToolbar>
<Items>
<dx:ToolbarUndoButton>
</dx:ToolbarUndoButton>
<dx:ToolbarRedoButton>
</dx:ToolbarRedoButton>
<dx:ToolbarBoldButton BeginGroup="True">
</dx:ToolbarBoldButton>
<dx:ToolbarItalicButton>
</dx:ToolbarItalicButton>
<dx:ToolbarUnderlineButton>
</dx:ToolbarUnderlineButton>
<dx:ToolbarStrikethroughButton>
</dx:ToolbarStrikethroughButton>
<dx:ToolbarInsertOrderedListButton BeginGroup="True">
</dx:ToolbarInsertOrderedListButton>
<dx:ToolbarInsertUnorderedListButton>
</dx:ToolbarInsertUnorderedListButton>
</Items>
</dx:HtmlEditorToolbar>
<dx:HtmlEditorToolbar>
<Items>
<dx:CustomToolbarButton CommandName="addSignature" Text="Add Signature" ToolTip="Add Signature">
</dx:CustomToolbarButton>
<dx:CustomToolbarButton CommandName="clear" Text="Clear" ToolTip="Clear">
</dx:CustomToolbarButton>
</Items>
</dx:HtmlEditorToolbar>
</Toolbars>
<Shortcuts>
<dx:HtmlEditorShortcut ActionName="addSignature" ActionType="ExecuteCommand" Shortcut="Ctrl+Shift+I" />
<dx:HtmlEditorShortcut ActionName="clear" ActionType="ExecuteCommand" Shortcut="Ctrl+Shift+D" />
</Shortcuts>
<ClientSideEvents CommandExecuted="function(s, e) { onCommandExecuted(e); }"
CustomCommand="function(s, e) { onCustomCommand(e.commandName); }">
</ClientSideEvents>
</dx:ASPxHtmlEditor>