ASP.NET HTML Editor – Keyboard Shortcuts

Keyboard shortcuts are great. Especially when you’re writing in an online HTML editor, because they don’t require you to take your hands off the keyboard!

The DevExpress ASPxHtmlEditor editor provides many popular keyboard shortcuts as defaults.

And in the latest release of DXperience v2011.2, we added the ability for you to customize these keyboard shortcuts for your end-users (S38048).

Default Shortcuts

Here’s the list of the default ASPxHtmlEditor keyboard shortcuts.

Notice that the ASPxHtmlEditor provides a way for you to create hyperlinks using the common ‘Control + K’ keyboard shortcut found in many popular office products. Personally, I love that shortcut!

Try it now online: http://demos.devexpress.com/ASPxHTMLEditorDemos/Features/General.aspx

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

 

Customization

There are two ways to customize the keyboard shortcuts, at design-time and runtime.

Design-time

In fact, you can redefine default shortcuts and create custom shortcuts at design time in two ways: using a shortcut editor or directly in a markup. To display the shortcut editor, click the Shortcuts property’s ellipsis button in the Properties window while designing.

ASPxHtmlEditor - Design Time Customization

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>

 

Runtime

The ASPxHtmlEditor allows you to modify any shortcuts at run time. Simply use 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.

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");
     }
}

 

ASP.NET MVC Supported too!

These shortcuts can also customized for the DevExpress ASP.NET MVC HTML Editor extension too!

 

What custom shortcuts have you added to the ASPxHtmlEditor? Drop me a line below with your thoughts, thanks!

Save time and money…

Save time and money with high quality pre-built components for ASP.NET, Windows Forms, WPF, Silverlight and VCL as well as IDE Productivity Tools and Business Application Frameworks, all backed by world-class service and support. Our technologies help you build your best, see complex software with greater clarity, increase your productivity and create stunning applications for Windows and Web in the shortest possible time.

Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Home/Try.xml

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s