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.
 
 
 
 

76 lines
34 KiB

<!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="description" content="GrapesJS documentation">
<link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61">
<script src="../js/grapes.min.js?v0.14.61"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/17.2a67de0b.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Twitter
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></nav></div></header><div class="sidebar-mask"></div><div 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
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Twitter
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" 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/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="active sidebar-link">Commands</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/commands.html#commands" class="sidebar-link">Commands</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#extend" class="sidebar-link">extend</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#has" class="sidebar-link">has</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#run" class="sidebar-link">run</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#stop" class="sidebar-link">stop</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#isactive" class="sidebar-link">isActive</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#getactive" class="sidebar-link">getActive</a></li></ul></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/style_manager.html" class="sidebar-link">Style Manager</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/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</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" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="commands"><a href="#commands" aria-hidden="true" class="header-anchor">#</a> Commands</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></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>
commands<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</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. 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 keyword">const</span> commands <span class="token operator">=</span> editor<span class="token punctuation">.</span>Commands<span class="token punctuation">;</span>
</code></pre></div><ul><li><a href="#add">add</a></li><li><a href="#get">get</a></li><li><a href="#getall">getAll</a></li><li><a href="#extend">extend</a></li><li><a href="#has">has</a></li><li><a href="#run">run</a></li><li><a href="#stop">stop</a></li><li><a href="#isactive">isActive</a></li><li><a href="#getactive">getActive</a></li></ul><h2 id="add"><a href="#add" aria-hidden="true" class="header-anchor">#</a> add</h2><p>Add new command to the collection</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" 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<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong> Command's ID</li><li><code>command</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a>)</strong> Object representing your command,
By passing just a function it's intended as a stateless command
(just like passing an object with only <code>run</code> method).</li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'myCommand'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token function">run</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> sender<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hello world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">stop</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> sender<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 punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// As a function</span>
commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'myCommand2'</span><span class="token punctuation">,</span> editor <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>
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="get"><a href="#get" aria-hidden="true" class="header-anchor">#</a> get</h2><p>Get command by ID</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" 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<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong> Command's ID</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> myCommand <span class="token operator">=</span> commands<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'myCommand'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
myCommand<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</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<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong> Object representing the command</p><h2 id="extend"><a href="#extend" aria-hidden="true" class="header-anchor">#</a> extend</h2><p>Extend the command. The command to extend should be defined as an object</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" 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<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong> Command's ID</li><li><code>cmd</code> (optional, default <code>{}</code>)</li><li><code>Object</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong> with the new command functions</li></ul><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>commands<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token string">'old-command'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token function">someInnerFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</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>Returns <strong>this</strong></p><h2 id="has"><a href="#has" aria-hidden="true" class="header-anchor">#</a> has</h2><p>Check if command exists</p><h3 id="parameters-4"><a href="#parameters-4" aria-hidden="true" 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<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong> Command's ID</li></ul><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong></p><h2 id="getall"><a href="#getall" aria-hidden="true" class="header-anchor">#</a> getAll</h2><p>Get an object containing all the commands</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong></p><h2 id="run"><a href="#run" aria-hidden="true" class="header-anchor">#</a> run</h2><p>Execute the command</p><h3 id="parameters-5"><a href="#parameters-5" aria-hidden="true" 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<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong> Command ID</li><li><code>options</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong> Options (optional, default <code>{}</code>)</li></ul><h3 id="examples-4"><a href="#examples-4" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>commands<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token string">'myCommand'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> someOption<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2 id="stop"><a href="#stop" aria-hidden="true" class="header-anchor">#</a> stop</h2><p>Stop the command</p><h3 id="parameters-6"><a href="#parameters-6" aria-hidden="true" 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<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong> Command ID</li><li><code>options</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong> Options (optional, default <code>{}</code>)</li></ul><h3 id="examples-5"><a href="#examples-5" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>commands<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token string">'myCommand'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> someOption<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2 id="isactive"><a href="#isactive" aria-hidden="true" class="header-anchor">#</a> isActive</h2><p>Check if the command is active. You activate commands with <code>run</code>
and disable them with <code>stop</code>. If the command was created without <code>stop</code>
method it can't be registered as active</p><h3 id="parameters-7"><a href="#parameters-7" aria-hidden="true" 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<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong> Command id</li></ul><h3 id="examples-6"><a href="#examples-6" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> cId <span class="token operator">=</span> <span class="token string">'some-command'</span><span class="token punctuation">;</span>
commands<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span>cId<span class="token punctuation">)</span><span class="token punctuation">;</span>
commands<span class="token punctuation">.</span><span class="token function">isActive</span><span class="token punctuation">(</span>cId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; true</span>
commands<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span>cId<span class="token punctuation">)</span><span class="token punctuation">;</span>
commands<span class="token punctuation">.</span><span class="token function">isActive</span><span class="token punctuation">(</span>cId<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; false</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong></p><h2 id="getactive"><a href="#getactive" aria-hidden="true" class="header-anchor">#</a> getActive</h2><p>Get all active commands</p><h3 id="examples-7"><a href="#examples-7" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>commands<span class="token punctuation">.</span><span class="token function">getActive</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">// -&gt; { someCommand: itsLastReturn, anotherOne: ... };</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<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/commands.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/26/2018, 2:24:48 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/api/block_manager.html" class="prev">
Block Manager
</a></span><span class="next"><a href="/docs/api/components.html">
DOM Components
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/17.2a67de0b.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script>
</body>
</html>