grapesjs/docs/api/keymaps.md

Keymaps

You can customize the initial state of the module from the editor initialization

const editor = grapesjs.init({
 keymaps: {
    // Object of keymaps
   defaults: {
     'your-namespace:keymap-name' {
       keys: '⌘+z, ctrl+z',
       handler: 'some-command-id'
     },
     ...
   }
 }
})

Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.

// Listen to events
editor.on('keymap:add', () => { ... });

// Use the API
const keymaps = editor.Keymaps;
keymaps.add(...);

Available Events

• keymap:add - New keymap added. The new keyamp object is passed as an argument
• keymap:remove - Keymap removed. The removed keyamp object is passed as an argument
• keymap:emit - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event
• keymap:emit:{keymapId} - keymapId emitted, in arguments you get keymapId, shortcutUsed, Event

Methods

• getConfig
• add
• get
• getAll
• remove
• removeAll

getConfig

Get configuration object

Returns Object

add

Add new keymap

Parameters

• id string Keymap id

• keys string Keymap keys, eg. ctrl+a, ⌘+z, ctrl+z

• handler (Function | string) Keymap handler, might be a function

• opts Object Options (optional, default {})

  • opts.force Boolean Force the handler to be executed. (optional, default false)
  • opts.prevent Boolean Prevent default of the original triggered event. (optional, default false)

Examples

// 'ns' is just a custom namespace
keymaps.add('ns:my-keymap', '⌘+j, ⌘+u, ctrl+j, alt+u', editor => {
 console.log('do stuff');
});
// or
keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command', {
 // Prevent the default browser action
 prevent: true,
});

// listen to events
editor.on('keymap:emit', (id, shortcut, event) => {
 // ...
})

Returns Object Added keymap

get

Get the keymap by id

Parameters

• id string Keymap id

Examples

keymaps.get('ns:my-keymap');
// -> {keys, handler};

Returns Object Keymap object

getAll

Get all keymaps

Examples

keymaps.getAll();
// -> {id1: {}, id2: {}};

Returns Object

remove

Remove the keymap by id

Parameters

• id string Keymap id

Examples

keymaps.remove('ns:my-keymap');
// -> {keys, handler};

Returns Object Removed keymap

removeAll

Remove all binded keymaps

Returns this