Keyboard Shortcuts

  • 3 minutes to read

A keyboard shortcut is a set of one or more keys that invokes a dialog or executes a command when a user presses this set. The HtmlEditorShortcut class implements the shortcut functionality. The HtmlEditorShortcutCollection object stores a collection of shortcuts. To access this object, use the ASPxHtmlEditor.Shortcuts property.

Default Shortcuts

ASPxHtmlEditor has the following shortcuts:

Shortcut ActionName ActionView Description
Ctrl+A selectall Design Selects the entire content
Ctrl+B bold Design Applies bold formatting to the selected text
Ctrl+C kbcopy Design Copies the selection
Ctrl+E justifycenter Design Aligns text to the center
Ctrl+F showsearchpanel Design Shows search panel
Ctrl+F showsearchpanel Html Shows search panel
Ctrl+G insertimagedialog Design Invokes the Insert Image Dialog
Ctrl+H findandreplacedialog Design Invokes the Find and Replace Dialog
Ctrl+H findandreplacedialog Html Invokes the Find and Replace Dialog
Ctrl+I italic Design Applies italic formatting to the selected text
Ctrl+J justifyfull Design Justifies text
Ctrl+K insertlinkdialog Design Invokes the Insert Link Dialog for the selection
Ctrl+L justifyleft Design Justifies text left
Ctrl+P print Design Prints editor content
Ctrl+R justifyright Design Justifies text right
Ctrl+U underline Design Underlines the selected text
Ctrl+V kbpaste Design Pastes content from the clipboard
Ctrl+X kbcut Design Cuts the selection
Ctrl+Y redo Design Redoes the last undone action
Ctrl+Z undo Design Undoes the last action
Ctrl+Ins kbcopy Design Copies the selection
Ctrl+Space showintellisense Html Shows Intellisense
Ctrl+Shift+K unlink Design Unlinks the selection
Shift+Del kbcut Design Cuts the selection
Shift+Ins kbpaste Design Pastes content from the clipboard
F11 fullscreen Design Activates/deactivates full-screen mode
F11 fullscreen Html Activates/deactivates full-screen mode
F11 fullscreen Preview Activates/deactivates full-screen mode

Shortcut Design-time Customization

ASPxHtmlEditor allows you to redefine default shortcuts and create custom shortcuts at design time in two ways.

  • Using an ASPxHtmlEditor Designer

    HtmlEditor_Shortcuts

  • Directly in markup

    The code sample below demonstrates how you can specify shortcuts in markup. The first shortcut invokes a MyDialog custom dialog. The second shortcut redefines a default Ctrl+B shortcut. The third shortcut assigns the default command bold to custom shortcut.

    Note that other default shortcuts (except Ctrl+B) are still in effect.

    <dx:ASPxHtmlEditor ID="MyHtmlEditor" runat="server">
        <CustomDialogs>
            <dx:HtmlEditorCustomDialog Caption="My Custom Dialog" 
            FormPath="~/CustomDialogs/MyCustomDialog1.ascx" Name="MyDialog" />
        </CustomDialogs>
        <Shortcuts>
            <dx:HtmlEditorShortcut ActionName="MyDialog" ActionType="ShowCustomDialog" Shortcut="Ctrl+D" />
            <dx:HtmlEditorShortcut ActionName="backcolor" Shortcut="Ctrl+B" />
            <dx:HtmlEditorShortcut ActionName="bold" Shortcut="Alt+B" />
        </Shortcuts>
    </dx:ASPxHtmlEditor>
    

Shortcut Runtime Customization

ASPxHtmlEditor allows you to use the HtmlEditorShortcutCollection class methods to modify a shortcut collection at runtime.

The code sample below demonstrates how to modify a shortcut collection at runtime. The first shortcut invokes a MyDialog custom dialog. The second shortcut redefines a default Ctrl+B shortcut. The third shortcut assigns the default command bold to a custom shortcut.

Note that other default shortcuts (except Ctrl+B) are still in effect.

<dx:ASPxHtmlEditor ID="MyHtmlEditor" runat="server">
     <CustomDialogs>
          <dx:HtmlEditorCustomDialog Caption="My Custom Dialog" 
          FormPath="~/CustomDialogs/MyCustomDialog1.ascx" Name="MyDialog" />
     </CustomDialogs>
</dx:ASPxHtmlEditor>
using DevExpress.Web.ASPxHtmlEditor;

...

protected void Page_Load(object sender, EventArgs e) {
     if (!IsPostBack) {
          MyHtmlEditor.Shortcuts.Add("Ctrl+D", "MyDialog", ActionType.ShowCustomDialog);
          MyHtmlEditor.Shortcuts.Add("Ctrl+B", "backcolor");
          MyHtmlEditor.Shortcuts.Add("Alt+B", "bold");
     }
}