ASPxClientHtmlEditor.ExecuteCommand(commandName, parameter, addToUndoHistory) Method
Executes the specified command.
Declaration
ExecuteCommand(
commandName: string,
parameter: any,
addToUndoHistory: boolean
): booleanParameters
| Name | Type | Description |
|---|---|---|
| commandName | string | A string value that specifies the command to perform. |
| parameter | any | A string value specifying additional information about the command to perform. |
| addToUndoHistory | boolean | true, to add the specified command to the undo stack; otherwise, false. |
Returns
| Type | Description |
|---|---|
| boolean | true, if the specified command has been completed successfully; otherwise, false. |
Remarks
Use the ExecuteCommand method to execute either a default or custom command on the client side. Additional information about the command may be specified by using the parameter parameter.
If you need to execute a default command, set the commandName parameter to the value of the corresponding client constant, accessed through the ASPxClientCommandConsts object and pass the corresponding parameter. For example, if you set the commandName to the ASPxClientCommandConsts.FONTNAME_COMMAND constant value, and pass “Verdana” as the parameter, you will change the selected text’s font type to Verdana.
To execute a custom command, pass the commandName parameter a value that isn’t listed by any constant of the ASPxClientCommandConsts object. You can optionally append a parameter to a custom command by separating them with a semicolon (<command>;<parameter>). After that, the parameter passed as parameter is ignored. For custom commands, the ASPxHtmlEditor generates the ASPxClientHtmlEditor.CustomCommand client event, allowing you to implement your custom command logic.
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>