HtmlEditorShortcut.Shortcut Property

Gets or sets the keyboard combination that invokes the current shortcut’s functionality.

Namespace: DevExpress.Web.ASPxHtmlEditor

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

Declaration

C#

[DefaultValue("")]
public string Shortcut { get; set; }

VB.NET

<DefaultValue("")>
Public Property Shortcut As String

Property Value

Type	Default	Description
String	String.Empty	The String value specifying the keyboard combination.

Remarks

Use the Shortcut property to specify the keyboard combination that invokes the current shortcut’s functionality. A shortcut can contain the following keys, joined by a plus sign (+):

• one of the following keys: Back (Backspace), Del (Delete), Ins (Insert), Down, Left, Right, Up, Space, functional keys from F1 to F12, any number (from 0 to 9), any letter (from A to Z);
• one or several keys from the following list: Alt, Ctrl, Shift.

Or a shortcut can contain a single functional key from F1 to F12.

Note that the Shortcut property is not case sensitive, and the key order does not matter. The editor corrects the shortcut property value automatically. If a shortcut is specified incorrectly, the exception with the text ‘The given key was not present in the dictionary’ is thrown.

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.

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

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>