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 you 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). We at DevExpress are not only trying to make you more productive when you use our controls from DXv2, but we're also looking out for your end-users.

Default Shortcuts

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

Notice that the ASPxHtmlEditor provides a way for you to create links 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

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.

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!

Free DevExpress Products - Get Your Copy Today