Client-Side Commands

  • 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 client ASPxClientHtmlEditor.ExecuteCommand 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.

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