Keyboard Shortcuts
- 3 minutes 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 | 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
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");
}
}