Client-Side Commands

• Aug 01, 2019
• 2 minutes to read

ASPxHtmlEditor functionality is implemented through internal commands. Each time an end-user interacts with the control by clicking toolbar items, using hotkeys, typing, etc., one of default commands is invoked. Most of these commands can also be executed programmatically by the ASPxClientHtmlEditor.ExecuteCommand client method. Internal commands that can be executed manually are listed in the ASPxClientCommandConsts class.

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 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>