HtmlEditorShortcut.ActionType Property

Gets or sets the type of action that is executed when a shortcut is pressed.

Namespace: DevExpress.Web.ASPxHtmlEditor

Assembly: DevExpress.Web.ASPxHtmlEditor.v23.2.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue(ActionType.ExecuteCommand)]
public ActionType ActionType { get; set; }

VB.NET

<DefaultValue(ActionType.ExecuteCommand)>
Public Property ActionType As ActionType

Property Value

Type	Default	Description
ActionType	ExecuteCommand	One of the ActionType enumeration values.

Available values:

Name	Description
ExecuteCommand	When the shortcut is pressed, a command specified via the HtmlEditorShortcut.ActionName property is executed.
ShowCustomDialog	When the shortcut is pressed, a dialog specified via the HtmlEditorShortcut.ActionName property is shown.

Remarks

Use the ActionType property to specify the action that is executed when the shortcut is pressed: executing a command (ExecuteCommand) or showing a custom dialog (ShowCustomDialog).

Note

ASPxHtmlEditor can display dialogs in Design view only. Therefore, if the ActionType property is set to ShowCustomDialog, the HtmlEditorShortcut.ActionView property must be set to Design.

See the Keyboard Shortcuts topic for more information.

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.

HtmlEditor.aspx (C#)

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

HtmlEditor.aspx (VB.NET)

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