Add support for keyboard shortcuts in edit mode

Code by:

Marthin Freij

Konstruktor Sweden AB

Owner, developer and trainer at Konstruktor Sweden AB

Adding keyboard shortcuts to edit mode turned out to be quite easy to do. Attached to this post you will find three files:

  • shortcuts.js - an open source library to register, listen and act on keyboard shortcuts (link to project)
  • editpanel.js - a jQuery script where we can bind our shortcuts
  • KeyboardShortcutsPlugin.cs - a plug-in to register the two JavaScripts in edit panel

Add all files to a folder named shortcuts in your webroot.

The following keyboard shortcuts should work in edit panel:

  • Ctrl+1 - Selects the first tab in edit panel (usually Preview)
  • Ctrl+2 - Selects the second tab in edit panel (usually Edit)
  • and so on...
  • Ctrl+Shift+1 - Selects the first tab in sub tabs (usually Content)
  • and so on...
  • Ctrl+S - Save
  • Ctrl+Shift+V - Save and view
  • Ctrl+Shift+P - Save and publish
Used for Product: EPiServer CMS 6
Code sample:

All use of the code is on a “use at your own risk” basis. Episerver is under no circumstances responsible for any direct or indirect loss experienced by users or project owners, when downloading and using code presented within the section Code on Episerver World. Please note that this is example code and should not be used within production environment without testing. Episerver do not support the code examples posted within the section Code on Episerver World.