Client-Side Commands

• Jan 19, 2022
• 2 minutes to read

ASPxHtmlEditor functionality is implemented through internal commands. The HTML Editor invokes a corresponding command each time a user interacts with the control (clicks toolbar items, uses hotkeys, types text). For instance, the editor invokes the COPY_COMMAND when a user selects the Copy command in the context menu or toolbar.

The ExecuteCommand method allows you to programmatically execute most of these commands. Refer to the following section for the list of available commands: ASPxClientCommandConsts.

It’s also possible to execute a custom client command in the same way. In this case, it’s necessary to pass the command name that doesn’t match any of the aforementioned default commands to the ASPxClientHtmlEditor.ExecuteCommand method and handle the ASPxClientHtmlEditor.CommandExecuted event to perform required actions.

Example

The following example demonstrates how to create custom toolbar items - Delete All and Add Smile:

The Delete All button click performs the following:

• Selects the entire editor’s content using the ASPxClientCommandConsts.SELECT_ALL default command.
• Pastes an empty string using the ASPxClientCommandConsts.PASTEHTML_COMMAND default command.

ASPX

<dx:ASPxHtmlEditor ID="ASPxHtmlEditor1" runat="server">
    <Toolbars>
        <dx:CustomToolbar>
            <Items>
                <dx:CustomToolbarButton CommandName="delete_all" 
                    Text="Delete All">
                </dx:CustomToolbarButton>
                <dx:CustomToolbarButton CommandName="add_smile" 
                    ViewStyle="Image">
                    <Image Height="13px" Url="~/Images/smile-button.png" 
                        Width="13px">
                    </Image>
                </dx:CustomToolbarButton>
            </Items>
        </dx:CustomToolbar>
    </Toolbars>
    <ClientSideEvents CustomCommand="function(s, e) {
        var imgHtml = '&lt;img src=&quot;Images/smile.png&quot;&gt;';
        switch (e.commandName){
            case 'delete_all':
                s.ExecuteCommand(ASPxClientCommandConsts.SELECT_ALL, null);
                s.ExecuteCommand(ASPxClientCommandConsts.PASTEHTML_COMMAND, '&nbsp;');
                break;
            case 'add_smile':
                s.ExecuteCommand(ASPxClientCommandConsts.PASTEHTML_COMMAND, imgHtml);
                break;
        }
    }" />
</dx:ASPxHtmlEditor>