tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Free and Open source Web Builder Framework. Next generation tool for building templates without coding
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
248 Commits
198 Branches
159 Tags
125 MiB
 
 
 
 
Tree: 71ab39ccb7
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '71ab39ccb7'
${ noResults }
grapesjs/docs/api/keymaps.html

84 lines
32 KiB
Raw Blame History

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>GrapesJS</title>
<meta name="generator" content="VuePress 1.8.2">
<link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.18.1">
<script src="../js/grapes.min.js?v0.18.1"></script>
<meta name="description" content="GrapesJS documentation">
<link rel="preload" href="/docs/assets/css/0.styles.3b77bb8f.css" as="style"><link rel="preload" href="/docs/assets/js/app.f6ceb853.js" as="script"><link rel="preload" href="/docs/assets/js/11.c4867228.js" as="script"><link rel="preload" href="/docs/assets/js/2.15028157.js" as="script"><link rel="preload" href="/docs/assets/js/37.e87d0a97.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.0eaadd95.js"><link rel="prefetch" href="/docs/assets/js/12.4f724132.js"><link rel="prefetch" href="/docs/assets/js/13.8130e741.js"><link rel="prefetch" href="/docs/assets/js/14.805bfcc5.js"><link rel="prefetch" href="/docs/assets/js/15.2f851491.js"><link rel="prefetch" href="/docs/assets/js/16.fa821c02.js"><link rel="prefetch" href="/docs/assets/js/17.4556dfbe.js"><link rel="prefetch" href="/docs/assets/js/18.4f40ea04.js"><link rel="prefetch" href="/docs/assets/js/19.a8c65aff.js"><link rel="prefetch" href="/docs/assets/js/20.eb810581.js"><link rel="prefetch" href="/docs/assets/js/21.6ee52bc5.js"><link rel="prefetch" href="/docs/assets/js/22.9507d23b.js"><link rel="prefetch" href="/docs/assets/js/23.58ed4097.js"><link rel="prefetch" href="/docs/assets/js/24.88dca6d4.js"><link rel="prefetch" href="/docs/assets/js/25.b1ca5007.js"><link rel="prefetch" href="/docs/assets/js/26.9a241b9b.js"><link rel="prefetch" href="/docs/assets/js/27.716654d0.js"><link rel="prefetch" href="/docs/assets/js/28.10c1e483.js"><link rel="prefetch" href="/docs/assets/js/29.dfc72b5f.js"><link rel="prefetch" href="/docs/assets/js/3.204e4229.js"><link rel="prefetch" href="/docs/assets/js/30.c66e083f.js"><link rel="prefetch" href="/docs/assets/js/31.568d9fb6.js"><link rel="prefetch" href="/docs/assets/js/32.e802b75d.js"><link rel="prefetch" href="/docs/assets/js/33.691a5bb6.js"><link rel="prefetch" href="/docs/assets/js/34.1e5a1c01.js"><link rel="prefetch" href="/docs/assets/js/35.17b11923.js"><link rel="prefetch" href="/docs/assets/js/36.5d629ef2.js"><link rel="prefetch" href="/docs/assets/js/38.955d1292.js"><link rel="prefetch" href="/docs/assets/js/39.a07de4ca.js"><link rel="prefetch" href="/docs/assets/js/4.d382fc80.js"><link rel="prefetch" href="/docs/assets/js/40.d4073f81.js"><link rel="prefetch" href="/docs/assets/js/41.829b4578.js"><link rel="prefetch" href="/docs/assets/js/42.ec1740ef.js"><link rel="prefetch" href="/docs/assets/js/43.b2ddcfb0.js"><link rel="prefetch" href="/docs/assets/js/44.545a0016.js"><link rel="prefetch" href="/docs/assets/js/45.671c328f.js"><link rel="prefetch" href="/docs/assets/js/46.d0d8528c.js"><link rel="prefetch" href="/docs/assets/js/47.9ffb6059.js"><link rel="prefetch" href="/docs/assets/js/48.9685aa58.js"><link rel="prefetch" href="/docs/assets/js/49.53dd281f.js"><link rel="prefetch" href="/docs/assets/js/5.8ddecc67.js"><link rel="prefetch" href="/docs/assets/js/50.6ec32cae.js"><link rel="prefetch" href="/docs/assets/js/51.a38128bf.js"><link rel="prefetch" href="/docs/assets/js/52.623efbff.js"><link rel="prefetch" href="/docs/assets/js/53.d4c77b92.js"><link rel="prefetch" href="/docs/assets/js/54.935d1177.js"><link rel="prefetch" href="/docs/assets/js/55.6eea3a30.js"><link rel="prefetch" href="/docs/assets/js/56.dbde1579.js"><link rel="prefetch" href="/docs/assets/js/57.73ca8622.js"><link rel="prefetch" href="/docs/assets/js/58.411f8503.js"><link rel="prefetch" href="/docs/assets/js/59.cf72de43.js"><link rel="prefetch" href="/docs/assets/js/6.e462c815.js"><link rel="prefetch" href="/docs/assets/js/60.9e38372c.js"><link rel="prefetch" href="/docs/assets/js/61.1c4522b5.js"><link rel="prefetch" href="/docs/assets/js/62.1aab8bfa.js"><link rel="prefetch" href="/docs/assets/js/63.3914fe5b.js"><link rel="prefetch" href="/docs/assets/js/64.d4085390.js"><link rel="prefetch" href="/docs/assets/js/65.9394620d.js"><link rel="prefetch" href="/docs/assets/js/66.ea4f62a4.js"><link rel="prefetch" href="/docs/assets/js/67.5eee6e92.js"><link rel="prefetch" href="/docs/assets/js/68.47bbc1d5.js"><link rel="prefetch" href="/docs/assets/js/69.7509cd19.js"><link rel="prefetch" href="/docs/assets/js/7.47112ec1.js"><link rel="prefetch" href="/docs/assets/js/70.f312d5fd.js"><link rel="prefetch" href="/docs/assets/js/71.69b98d16.js"><link rel="prefetch" href="/docs/assets/js/72.e105e3d7.js"><link rel="prefetch" href="/docs/assets/js/8.8ef598af.js"><link rel="prefetch" href="/docs/assets/js/9.7dc718fa.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.3b77bb8f.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" alt="GrapesJS" class="logo"> <span class="site-name can-hide">GrapesJS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
Docs
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link router-link-active">
API Reference
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Support Us
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Twitter
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
Docs
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link router-link-active">
API Reference
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Support Us
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Twitter
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="native-carbon" class="carbon-ads"></div> <ul class="sidebar-links"><li><a href="/docs/api/" aria-current="page" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/frame.html" class="sidebar-link"> ‍ ‍ ‍ Frame</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/asset.html" class="sidebar-link"> ‍ ‍ ‍ Asset</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/block.html" class="sidebar-link"> ‍ ‍ ‍ Block</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> ‍ ‍ ‍ Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/pages.html" class="sidebar-link">Pages</a></li><li><a href="/docs/api/page.html" class="sidebar-link"> ‍ ‍ ‍ Page</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/sector.html" class="sidebar-link"> ‍ ‍ ‍ Sector</a></li><li><a href="/docs/api/property.html" class="sidebar-link"> ‍ ‍ ‍ Property</a></li><li><a href="/docs/api/property_number.html" class="sidebar-link"> ‍ ‍ ‍ PropertyNumber</a></li><li><a href="/docs/api/property_select.html" class="sidebar-link"> ‍ ‍ ‍ PropertySelect</a></li><li><a href="/docs/api/property_composite.html" class="sidebar-link"> ‍ ‍ ‍ PropertyComposite</a></li><li><a href="/docs/api/property_stack.html" class="sidebar-link"> ‍ ‍ ‍ PropertyStack</a></li><li><a href="/docs/api/layer.html" class="sidebar-link"> ‍ ‍ ‍ Layer</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/device.html" class="sidebar-link"> ‍ ‍ ‍ Device</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/selector.html" class="sidebar-link"> ‍ ‍ ‍ Selector</a></li><li><a href="/docs/api/state.html" class="sidebar-link"> ‍ ‍ ‍ State</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/css_rule.html" class="sidebar-link"> ‍ ‍ ‍ CssRule</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" aria-current="page" class="active sidebar-link">Keymaps</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#keymaps" class="sidebar-link">Keymaps</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#available-events" class="sidebar-link">Available Events</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#removeall" class="sidebar-link">removeAll</a></li></ul></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li><li><a href="/docs/api/parser.html" class="sidebar-link">Parser</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="keymaps"><a href="#keymaps" class="header-anchor">#</a> Keymaps</h2> <p>You can customize the initial state of the module from the editor initialization</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
keymaps<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// Object of keymaps</span>
defaults<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string">'your-namespace:keymap-name'</span> <span class="token punctuation">{</span>
keys<span class="token operator">:</span> <span class="token string">'⌘+z, ctrl+z'</span><span class="token punctuation">,</span>
handler<span class="token operator">:</span> <span class="token string">'some-command-id'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>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.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Listen to events</span>
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'keymap:add'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Use the API</span>
<span class="token keyword">const</span> keymaps <span class="token operator">=</span> editor<span class="token punctuation">.</span>Keymaps<span class="token punctuation">;</span>
keymaps<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="available-events"><a href="#available-events" class="header-anchor">#</a> Available Events</h2> <ul><li><code>keymap:add</code> - New keymap added. The new keyamp object is passed as an argument</li> <li><code>keymap:remove</code> - Keymap removed. The removed keyamp object is passed as an argument</li> <li><code>keymap:emit</code> - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event</li> <li><code>keymap:emit:{keymapId}</code> - <code>keymapId</code> emitted, in arguments you get keymapId, shortcutUsed, Event</li></ul> <h2 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h2> <ul><li><a href="#getconfig">getConfig</a></li> <li><a href="#add">add</a></li> <li><a href="#get">get</a></li> <li><a href="#getAll">getAll</a></li> <li><a href="#remove">remove</a></li> <li><a href="#removeall">removeAll</a></li></ul> <h2 id="getconfig"><a href="#getconfig" class="header-anchor">#</a> getConfig</h2> <p>Get module configurations</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Configuration object</p> <h2 id="add"><a href="#add" class="header-anchor">#</a> add</h2> <p>Add new keymap</p> <h3 id="parameters"><a href="#parameters" class="header-anchor">#</a> Parameters</h3> <ul><li><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Keymap id</li> <li><code>keys</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Keymap keys, eg. <code>ctrl+a</code>, <code>⌘+z, ctrl+z</code></li> <li><code>handler</code> <strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</strong> Keymap handler, might be a function</li> <li><code>opts</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Options (optional, default <code>{}</code>)</li></ul> <h3 id="examples"><a href="#examples" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 'ns' is just a custom namespace</span>
keymaps<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'ns:my-keymap'</span><span class="token punctuation">,</span> <span class="token string">'⌘+j, ⌘+u, ctrl+j, alt+u'</span><span class="token punctuation">,</span> <span class="token parameter">editor</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'do stuff'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// or</span>
keymaps<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'ns:my-keymap'</span><span class="token punctuation">,</span> <span class="token string">'⌘+s, ctrl+s'</span><span class="token punctuation">,</span> <span class="token string">'some-gjs-command'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// listen to events</span>
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'keymap:emit'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> shortcut<span class="token punctuation">,</span> e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Added keymap
or just a command id as a string</p> <h2 id="get"><a href="#get" class="header-anchor">#</a> get</h2> <p>Get the keymap by id</p> <h3 id="parameters-2"><a href="#parameters-2" class="header-anchor">#</a> Parameters</h3> <ul><li><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Keymap id</li></ul> <h3 id="examples-2"><a href="#examples-2" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>keymaps<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'ns:my-keymap'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; {keys, handler};</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Keymap object</p> <h2 id="getall"><a href="#getall" class="header-anchor">#</a> getAll</h2> <p>Get all keymaps</p> <h3 id="examples-3"><a href="#examples-3" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>keymaps<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; {id1: {}, id2: {}};</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="remove"><a href="#remove" class="header-anchor">#</a> remove</h2> <p>Remove the keymap by id</p> <h3 id="parameters-3"><a href="#parameters-3" class="header-anchor">#</a> Parameters</h3> <ul><li><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Keymap id</li></ul> <h3 id="examples-4"><a href="#examples-4" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>keymaps<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'ns:my-keymap'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; {keys, handler};</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Removed keymap</p> <h2 id="removeall"><a href="#removeall" class="header-anchor">#</a> removeAll</h2> <p>Remove all binded keymaps</p> <p>Returns <strong>this</strong></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/keymaps.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">12/30/2021, 1:29:27 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/api/rich_text_editor.html" class="prev">
Rich Text Editor
</a></span> <span class="next"><a href="/docs/api/undo_manager.html">
Undo Manager
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/assets/js/app.f6ceb853.js" defer></script><script src="/docs/assets/js/11.c4867228.js" defer></script><script src="/docs/assets/js/2.15028157.js" defer></script><script src="/docs/assets/js/37.e87d0a97.js" defer></script>
</body>
</html>