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. Before using these methods you should get the module from the instance

const keymaps = editor.Keymaps;

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

getConfig

Get module configurations

Returns Object Configuration 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 {})

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');

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

Returns Object Added keymap or just a command id as a string

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