Skip to main content
Canvas Editor provides a powerful shortcut system that allows you to register custom keyboard shortcuts for any editor command.

​
Basic Usage

Register shortcuts using editor.register.shortcutList(): 
import Editor, { KeyMap, Command } from 'canvas-editor'

const editor = new Editor(container, data, options)

editor.register.shortcutList([
  {
    key: KeyMap.S,
    mod: true, // Cmd on Mac, Ctrl on Windows
    callback: (command: Command) => {
      // Save document
      console.log('Save triggered!')
    }
  }
])

​
Shortcut Configuration

​
IRegisterShortcut Interface

interface IRegisterShortcut {
  key: KeyMap                           // The key to bind
  ctrl?: boolean                        // Require Ctrl key
  meta?: boolean                        // Require Meta/Cmd key
  mod?: boolean                         // Ctrl on Windows, Cmd on Mac
  shift?: boolean                       // Require Shift key
  alt?: boolean                         // Require Alt/Option key
  isGlobal?: boolean                    // Listen globally (outside editor)
  callback?: (command: Command) => void // Handler function
  disable?: boolean                     // Temporarily disable shortcut
}

​
Modifier Keys

​
Available Keys

Use the KeyMap enum for key values: 
KeyMap.A, KeyMap.B, KeyMap.C, ..., KeyMap.Z
See /src/editor/dataset/enum/KeyMap.ts:1 in the source code for the complete list of available keys.

​
Built-in Shortcuts

Canvas Editor includes built-in shortcuts for common text formatting:
ShortcutActionSource
Mod+BBold/src/editor/core/shortcut/keys/richtextKeys.ts:30
Mod+IItalic/src/editor/core/shortcut/keys/richtextKeys.ts:37
Mod+UUnderline/src/editor/core/shortcut/keys/richtextKeys.ts:44
Ctrl+Shift+XStrikethrough/src/editor/core/shortcut/keys/richtextKeys.ts:8
Mod+]Increase font size/src/editor/core/shortcut/keys/richtextKeys.ts:16
Mod+[Decrease font size/src/editor/core/shortcut/keys/richtextKeys.ts:22
ShortcutActionSource
Mod+LAlign left/src/editor/core/shortcut/keys/richtextKeys.ts:67
Mod+EAlign center/src/editor/core/shortcut/keys/richtextKeys.ts:73
Mod+RAlign right/src/editor/core/shortcut/keys/richtextKeys.ts:79
Mod+JAlignment/src/editor/core/shortcut/keys/richtextKeys.ts:88
Mod+Shift+JJustify/src/editor/core/shortcut/keys/richtextKeys.ts:95
ShortcutActionSource
Mod+Shift+, (Mac) / Mod+Shift+> (Win)Superscript/src/editor/core/shortcut/keys/richtextKeys.ts:51
Mod+Shift+. (Mac) / Mod+Shift+< (Win)Subscript/src/editor/core/shortcut/keys/richtextKeys.ts:59

​
Real-World Examples

1

Save Document Shortcut

editor.register.shortcutList([
  {
    key: KeyMap.S,
    mod: true,
    isGlobal: true, // Works even when editor not focused
    callback: (command: Command) => {
      const data = command.getValue()
      // Save to server or local storage
      saveDocument(data)
    }
  }
])
2

Quick Format Shortcuts

import { KeyMap, RowFlex } from 'canvas-editor'

editor.register.shortcutList([
  // Clear formatting
  {
    key: KeyMap.BACKSLASH,
    mod: true,
    callback: (command) => {
      command.executeFormat()
    }
  },
  // Insert horizontal rule
  {
    key: KeyMap.MINUS,
    mod: true,
    shift: true,
    callback: (command) => {
      command.executeInsertElementList([{
        type: ElementType.SEPARATOR
      }])
    }
  },
  // Toggle heading
  {
    key: KeyMap.ONE,
    mod: true,
    shift: true,
    callback: (command) => {
      command.executeTitle(TitleLevel.FIRST)
    }
  }
])
3

Custom Command Shortcuts

// First, create a plugin with custom command
function customCommandPlugin(editor: Editor) {
  const command = editor.command as any
  
  command.executeInsertTimestamp = () => {
    const timestamp = new Date().toLocaleString()
    command.executeInsertElementList([{
      value: timestamp
    }])
  }
}

// Register plugin
editor.use(customCommandPlugin)

// Then add shortcut
editor.register.shortcutList([
  {
    key: KeyMap.T,
    mod: true,
    shift: true,
    callback: (command: any) => {
      command.executeInsertTimestamp()
    }
  }
])

​
Global vs Editor Shortcuts

By default, shortcuts only work when the editor is focused:
{
  key: KeyMap.B,
  mod: true,
  // isGlobal: false (default)
  callback: (command) => command.executeBold()
}
Use this for most text editing shortcuts.
Global shortcuts can conflict with browser shortcuts. Use them sparingly and choose key combinations that won’t interfere with common browser functions.

​
Disabling Shortcuts

Temporarily disable a shortcut without removing it: 
const shortcuts = [
  {
    key: KeyMap.S,
    mod: true,
    disable: true, // Shortcut won't trigger
    callback: (command) => command.executeSave()
  }
]

editor.register.shortcutList(shortcuts)

// Later, enable it by re-registering without disable flag
shortcuts[0].disable = false
editor.register.shortcutList(shortcuts)

​
Disabling Built-in Shortcuts

To disable built-in shortcuts, use the editor options: 
const editor = new Editor(container, data, {
  shortcuts: {
    // Disable specific built-in shortcuts
    bold: false,
    italic: false
  }
})
Alternatively, override them with your own: 
editor.register.shortcutList([
  {
    key: KeyMap.B,
    mod: true,
    callback: (command) => {
      // Custom behavior instead of bold
      console.log('Custom Mod+B action')
    }
  }
])
Shortcuts registered later take precedence. The system processes shortcuts in the order they were registered, with the most recent taking priority.

​
Accessing Registered Shortcuts

Retrieve the list of registered shortcuts for debugging: 
// Note: This is an internal API and may change
const shortcuts = editor.register.shortcutList
console.log('Registered shortcuts:', shortcuts)

​
Best Practices

Use mod for cross-platform

Always use mod: true instead of ctrl or meta for shortcuts that should work on both platforms.

Avoid browser conflicts

Don’t override common browser shortcuts like Mod+T (new tab) or Mod+W (close tab).

Document your shortcuts

Maintain a list of custom shortcuts for your users, especially if you’re building an application.

Test on multiple platforms

Always test shortcuts on both Mac and Windows to ensure consistent behavior.

​
Troubleshooting

  • Check if the editor is focused (unless using isGlobal: true)
  • Verify the key combination isn’t conflicting with browser shortcuts
  • Ensure disable is not set to true
  • Check if another shortcut with the same combination was registered later
  • Verify isGlobal: true is set
  • Check browser console for JavaScript errors
  • Some browsers may block certain key combinations for security
  • Use mod: true instead of ctrl or meta
  • Test on both macOS and Windows
  • Consider platform-specific keys for special cases (see /src/editor/core/shortcut/keys/richtextKeys.ts:51)

​
Next Steps

Context Menus

Add custom context menu items

Commands API

Explore available commands

Plugin System

Create custom plugins

Events

Listen to editor events

Build docs developers (and LLMs) love

Get started for freeTalk to us