Keyboard Shortcuts

  • 3 min to read

A keyboard shortcut is a set of one or more keys that invoke a dialog or execute a command when triggered by an end-user. A shortcut is represented by the HtmlEditorShortcut class. A collection of shortcuts is stored in the HtmlEditorShortcutCollection object, which can be accessed by the ASPxHtmlEditor.Shortcuts property.

Default Shortcuts

By default, ASPxHtmlEditor provides 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 Justifies text 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 the full-screen mode
F11 fullscreen Html Activates/deactivates the full-screen mode
F11 fullscreen Preview Activates/deactivates the 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

  • Dectly in a 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 modify a shortcut collection at run time, using the methods provided in the HtmlEditorShortcutCollection collection.

The code sample below demonstrates how you can modify a shortcut collection at run time. 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");
     }
}