ASP.NET HTML Editor - Keyboard Shortcuts

ASP.NET Team Blog
02 February 2012

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

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

Let's see what develops…

3 comment(s)
Jens Fudickar [DX-Squad]
Jens Fudickar [DX-Squad]

He, the big mister MH is back :-)

3 February, 2012
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Thanks Jens, I've missed blogging too. :)

3 February, 2012
James Zhong
James Zhong

Thanks for sharing the tips of keyboard shortcuts for HTML editor!

6 February, 2012

Please login or register to post comments.