<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="theme-default-content"><h1>404</h1><blockquote>Looks like we've got some broken links.</blockquote><ahref="/docs/"class="router-link-active">
<svgxmlns="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"><pathfill="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><polygonfill="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><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"aria-current="page"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/I18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Traits</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></section></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="getting-started"><ahref="#getting-started"class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>path/to/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"aria-current="page"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/I18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Traits</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></section></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="getting-started"><ahref="#getting-started"class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>path/to/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</code></pre></div><p>As you see we added a new command <code>helloWorld</code> and used its <code>id</code> as an identifier inside <code>button.command</code>. In addition to this we've also implemented two required methods, <code>run</code> and <code>stop</code>, to make button execute commands.</p><p>[[img/btn-clicked.png]]</p><blockquote><p>Check <ahref="API-Commands">Commands API Reference</a></p></blockquote><p>Check the <ahref="http://grapesjs.com/demo.html"target="_blank"rel="noopener noreferrer">demo<svgxmlns="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"><pathfill="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><polygonfill="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> for more complete usage of panels, buttons and built-in commands.</p><h2id="components"><ahref="#components"class="header-anchor">#</a> Components</h2><p>Components are elements inside the canvas, which can be drawn by commands or injected directly via configurations. In simple terms components represent the structure of our HTML document. You can init the editor with passing components as an HTML string</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>As you see we added a new command <code>helloWorld</code> and used its <code>id</code> as an identifier inside <code>button.command</code>. In addition to this we've also implemented two required methods, <code>run</code> and <code>stop</code>, to make button execute commands.</p><p>[[img/btn-clicked.png]]</p><blockquote><p>Check <ahref="API-Commands">Commands API Reference</a></p></blockquote><p>Check the <ahref="http://grapesjs.com/demo.html"target="_blank"rel="noopener noreferrer">demo<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a> for more complete usage of panels, buttons and built-in commands.</p><h2id="components"><ahref="#components"class="header-anchor">#</a> Components</h2><p>Components are elements inside the canvas, which can be drawn by commands or injected directly via configurations. In simple terms components represent the structure of our HTML document. You can init the editor with passing components as an HTML string</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
<spanclass="token comment">// Disable default local storage in case you've already used GrapesJS</span>
<spanclass="token comment">// Disable default local storage in case you've already used GrapesJS</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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> blockManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>BlockManager<spanclass="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> blockManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">;</span>
content<spanclass="token operator">:</span><spanclass="token string">'<h1>Put your title here</h1>'</span><spanclass="token punctuation">,</span>
content<spanclass="token operator">:</span><spanclass="token string">'<h1>Put your title here</h1>'</span><spanclass="token punctuation">,</span>
<spanclass="token comment">// [{label: 'Heading', content: '<h1>Put your ...'}, ...]</span>
<spanclass="token comment">// [{label: 'Heading', content: '<h1>Put your ...'}, ...]</span>
</code></pre></div><p>Returns <strong>Collection</strong></p><h2id="getallvisible"><ahref="#getallvisible"class="header-anchor">#</a> getAllVisible</h2><p>Return the visible collection, which containes blocks actually rendered</p><p>Returns <strong>Collection</strong></p><h2id="remove"><ahref="#remove"class="header-anchor">#</a> remove</h2><p>Remove a block by id</p><h3id="parameters-3"><ahref="#parameters-3"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="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"><pathfill="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><polygonfill="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> Block id</li></ul><p>Returns <strong>Block</strong> Removed block</p><h2id="getcategories"><ahref="#getcategories"class="header-anchor">#</a> getCategories</h2><p>Get all available categories.
</code></pre></div><p>Returns <strong>Collection</strong></p><h2id="getallvisible"><ahref="#getallvisible"class="header-anchor">#</a> getAllVisible</h2><p>Return the visible collection, which containes blocks actually rendered</p><p>Returns <strong>Collection</strong></p><h2id="remove"><ahref="#remove"class="header-anchor">#</a> remove</h2><p>Remove a block by id</p><h3id="parameters-3"><ahref="#parameters-3"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Block id</li></ul><h3id="examples-4"><ahref="#examples-4"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token comment">// Id of the block which need to be removed</span>
It's possible to add categories only within blocks via 'add()' method</p><p>Returns <strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="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"><pathfill="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><polygonfill="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> | Collection)</strong></p><h2id="getcontainer"><ahref="#getcontainer"class="header-anchor">#</a> getContainer</h2><p>Return the Blocks container element</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="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"><pathfill="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><polygonfill="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><h2id="render"><ahref="#render"class="header-anchor">#</a> render</h2><p>Render blocks</p><h3id="parameters-4"><ahref="#parameters-4"class="header-anchor">#</a> Parameters</h3><ul><li><code>blocks</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="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"><pathfill="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><polygonfill="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> Blocks to render, without the argument will render all global blocks</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="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"><pathfill="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><polygonfill="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>)
<spanclass="token keyword">const</span> id <spanclass="token operator">=</span><spanclass="token string">'button'</span><spanclass="token punctuation">;</span>
<ul><li><code>opts.external</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="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"><pathfill="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><polygonfill="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> Render blocks in a new container (HTMLElement will be returned)</li><li><code>opts.ignoreCategories</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="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"><pathfill="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><polygonfill="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> Render blocks without categories</li></ul></li></ul><h3id="examples-4"><ahref="#examples-4"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token comment">// Render all blocks (inside the global collection)</span>
</code></pre></div><p>Returns <strong>Block</strong> Removed block</p><h2id="getcategories"><ahref="#getcategories"class="header-anchor">#</a> getCategories</h2><p>Get all available categories.
It's possible to add categories only within blocks via 'add()' method</p><p>Returns <strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a> | Collection)</strong></p><h2id="getcontainer"><ahref="#getcontainer"class="header-anchor">#</a> getContainer</h2><p>Return the Blocks container element</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h2id="render"><ahref="#render"class="header-anchor">#</a> render</h2><p>Render blocks</p><h3id="parameters-4"><ahref="#parameters-4"class="header-anchor">#</a> Parameters</h3><ul><li><code>blocks</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Blocks to render, without the argument will render all global blocks</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Options (optional, default <code>{}</code>)
<ul><li><code>opts.external</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>?</strong> Render blocks in a new container (HTMLElement will be returned)</li><li><code>opts.ignoreCategories</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>?</strong> Render blocks without categories</li></ul></li></ul><h3id="examples-5"><ahref="#examples-5"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token comment">// Render all blocks (inside the global collection)</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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> commands <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Commands<spanclass="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> commands <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Commands<spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#add">add</a></li><li><ahref="#get">get</a></li><li><ahref="#getall">getAll</a></li><li><ahref="#extend">extend</a></li><li><ahref="#has">has</a></li><li><ahref="#run">run</a></li><li><ahref="#stop">stop</a></li><li><ahref="#isactive">isActive</a></li><li><ahref="#getactive">getActive</a></li></ul><h2id="add"><ahref="#add"class="header-anchor">#</a> add</h2><p>Add new command to the collection</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Command's ID</li><li><code>command</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a> | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function"target="_blank"rel="noopener noreferrer">Function<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>)</strong> Object representing your command,
By passing just a function it's intended as a stateless 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><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>commands<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'myCommand'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
(just like passing an object with only <code>run</code> method).</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>commands<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'myCommand'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2id="stop"><ahref="#stop"class="header-anchor">#</a> stop</h2><p>Stop the command</p><h3id="parameters-6"><ahref="#parameters-6"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="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"><pathfill="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><polygonfill="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><h3id="examples-5"><ahref="#examples-5"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>commands<spanclass="token punctuation">.</span><spanclass="token function">stop</span><spanclass="token punctuation">(</span><spanclass="token string">'myCommand'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span> someOption<spanclass="token operator">:</span><spanclass="token number">1</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2id="stop"><ahref="#stop"class="header-anchor">#</a> stop</h2><p>Stop the command</p><h3id="parameters-6"><ahref="#parameters-6"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Command ID</li><li><code>options</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Options (optional, default <code>{}</code>)</li></ul><h3id="examples-5"><ahref="#examples-5"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>commands<spanclass="token punctuation">.</span><spanclass="token function">stop</span><spanclass="token punctuation">(</span><spanclass="token string">'myCommand'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span> someOption<spanclass="token operator">:</span><spanclass="token number">1</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2id="isactive"><ahref="#isactive"class="header-anchor">#</a> isActive</h2><p>Check if the command is active. You activate commands with <code>run</code>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2id="isactive"><ahref="#isactive"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>
and disable them with <code>stop</code>. If the command was created without <code>stop</code>
</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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> deviceManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>DeviceManager<spanclass="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> deviceManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>DeviceManager<spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#add">add</a></li><li><ahref="#get">get</a></li><li><ahref="#getAll">getAll</a></li></ul><h2id="add"><ahref="#add"class="header-anchor">#</a> add</h2><p>Add new device to the collection. URLs are supposed to be unique</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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> Device id</li><li><code>width</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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> Width of the device</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="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"><pathfill="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><polygonfill="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> Custom options (optional, default <code>{}</code>)</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>deviceManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'tablet'</span><spanclass="token punctuation">,</span><spanclass="token string">'900px'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#add">add</a></li><li><ahref="#get">get</a></li><li><ahref="#getAll">getAll</a></li></ul><h2id="add"><ahref="#add"class="header-anchor">#</a> add</h2><p>Add new device to the collection. URLs are supposed to be unique</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Device id</li><li><code>width</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Width of the device</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>?</strong> Custom options (optional, default <code>{}</code>)</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>deviceManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'tablet'</span><spanclass="token punctuation">,</span><spanclass="token string">'900px'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
widthMedia<spanclass="token operator">:</span><spanclass="token string">'810px'</span><spanclass="token punctuation">,</span><spanclass="token comment">// the width that will be used for the CSS media</span>
widthMedia<spanclass="token operator">:</span><spanclass="token string">'810px'</span><spanclass="token punctuation">,</span><spanclass="token comment">// the width that will be used for the CSS media</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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> i18n <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>I18n<spanclass="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> i18n <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>I18n<spanclass="token punctuation">;</span>
</code></pre></div><h3id="events"><ahref="#events"class="header-anchor">#</a> Events</h3><ul><li><code>i18n:add</code> - New set of messages is added</li><li><code>i18n:update</code> - The set of messages is updated</li><li><code>i18n:locale</code> - Locale changed</li></ul><h2id="getconfig"><ahref="#getconfig"class="header-anchor">#</a> getConfig</h2><p>Get module configurations</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="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"><pathfill="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><polygonfill="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> Configuration object</p><h2id="setlocale"><ahref="#setlocale"class="header-anchor">#</a> setLocale</h2><p>Update current locale</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>locale</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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> Locale value</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>i18n<spanclass="token punctuation">.</span><spanclass="token function">setLocale</span><spanclass="token punctuation">(</span><spanclass="token string">'it'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><h3id="events"><ahref="#events"class="header-anchor">#</a> Events</h3><ul><li><code>i18n:add</code> - New set of messages is added</li><li><code>i18n:update</code> - The set of messages is updated</li><li><code>i18n:locale</code> - Locale changed</li></ul><h2id="getconfig"><ahref="#getconfig"class="header-anchor">#</a> getConfig</h2><p>Get module configurations</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Configuration object</p><h2id="setlocale"><ahref="#setlocale"class="header-anchor">#</a> setLocale</h2><p>Update current locale</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>locale</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Locale value</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>i18n<spanclass="token punctuation">.</span><spanclass="token function">setLocale</span><spanclass="token punctuation">(</span><spanclass="token string">'it'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="getlocale"><ahref="#getlocale"class="header-anchor">#</a> getLocale</h2><p>Get current locale</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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> Current locale value</p><h2id="getmessages"><ahref="#getmessages"class="header-anchor">#</a> getMessages</h2><p>Get all messages</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>lang</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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> Specify the language of messages to return</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="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"><pathfill="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><polygonfill="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>)
</code></pre></div><p>Returns <strong>this</strong></p><h2id="getlocale"><ahref="#getlocale"class="header-anchor">#</a> getLocale</h2><p>Get current locale</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Current locale value</p><h2id="getmessages"><ahref="#getmessages"class="header-anchor">#</a> getMessages</h2><p>Get all messages</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>lang</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>?</strong> Specify the language of messages to return</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>?</strong> Options (optional, default <code>{}</code>)
<ul><li><code>opts.debug</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="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"><pathfill="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><polygonfill="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> Show warnings in case of missing language</li></ul></li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>i18n<spanclass="token punctuation">.</span><spanclass="token function">getMessages</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<ul><li><code>opts.debug</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>?</strong> Show warnings in case of missing language</li></ul></li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>i18n<spanclass="token punctuation">.</span><spanclass="token function">getMessages</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<svgxmlns="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"><pathfill="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><polygonfill="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><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="active sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="api-reference"><ahref="#api-reference"class="header-anchor">#</a> API Reference</h1><p>Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also <ahref="/docs/modules/Plugins.html">create a plugin</a> and make those extensions reusable and available to others.</p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/README.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="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"><pathfill="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><polygonfill="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><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">7/9/2018, 1:03:59 AM</span></div></footer><divclass="page-nav"><pclass="inner"><!----><spanclass="next"><ahref="/docs/api/editor.html">
<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="active sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="api-reference"><ahref="#api-reference"class="header-anchor">#</a> API Reference</h1><p>Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also <ahref="/docs/modules/Plugins.html">create a plugin</a> and make those extensions reusable and available to others.</p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/README.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></div><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">7/9/2018, 1:03:59 AM</span></div></footer><divclass="page-nav"><pclass="inner"><!----><spanclass="next"><ahref="/docs/api/editor.html">
</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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> modal <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Modal<spanclass="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> modal <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Modal<spanclass="token punctuation">;</span>
<ul><li><code>opts.title</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="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"><pathfill="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><polygonfill="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> Title to set for the modal</li><li><code>opts.content</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="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"><pathfill="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><polygonfill="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> Content to set for the modal</li></ul></li></ul><p>Returns <strong>this</strong></p><h2id="close"><ahref="#close"class="header-anchor">#</a> close</h2><p>Close the modal window</p><p>Returns <strong>this</strong></p><h2id="onceclose"><ahref="#onceclose"class="header-anchor">#</a> onceClose</h2><p>Execute callback when the modal will be closed.
<ul><li><code>opts.title</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>)?</strong> Title to set for the modal</li><li><code>opts.content</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>)?</strong> Content to set for the modal</li><li><code>opts.attributes</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>?</strong> Updates the modal wrapper with custom attributes</li></ul></li></ul><p>Returns <strong>this</strong></p><h2id="close"><ahref="#close"class="header-anchor">#</a> close</h2><p>Close the modal window</p><p>Returns <strong>this</strong></p><h2id="onceclose"><ahref="#onceclose"class="header-anchor">#</a> onceClose</h2><p>Execute callback when the modal will be closed.
The callback will be called one only time</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function"target="_blank"rel="noopener noreferrer">Function<svgxmlns="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"><pathfill="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><polygonfill="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></li></ul><p>Returns <strong>this</strong></p><h2id="onceopen"><ahref="#onceopen"class="header-anchor">#</a> onceOpen</h2><p>Execute callback when the modal will be opened.
The callback will be called one only time</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function"target="_blank"rel="noopener noreferrer">Function<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong></li></ul><p>Returns <strong>this</strong></p><h2id="onceopen"><ahref="#onceopen"class="header-anchor">#</a> onceOpen</h2><p>Execute callback when the modal will be opened.
The callback will be called one only time</p><h3id="parameters-3"><ahref="#parameters-3"class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function"target="_blank"rel="noopener noreferrer">Function<svgxmlns="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"><pathfill="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><polygonfill="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></li></ul><p>Returns <strong>this</strong></p><h2id="isopen"><ahref="#isopen"class="header-anchor">#</a> isOpen</h2><p>Checks if the modal window is open</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="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"><pathfill="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><polygonfill="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><h2id="settitle"><ahref="#settitle"class="header-anchor">#</a> setTitle</h2><p>Set the title to the modal window</p><h3id="parameters-4"><ahref="#parameters-4"class="header-anchor">#</a> Parameters</h3><ul><li><code>title</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="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"><pathfill="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><polygonfill="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> Title</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>modal<spanclass="token punctuation">.</span><spanclass="token function">setTitle</span><spanclass="token punctuation">(</span><spanclass="token string">'New title'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
The callback will be called one only time</p><h3id="parameters-3"><ahref="#parameters-3"class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function"target="_blank"rel="noopener noreferrer">Function<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong></li></ul><p>Returns <strong>this</strong></p><h2id="isopen"><ahref="#isopen"class="header-anchor">#</a> isOpen</h2><p>Checks if the modal window is open</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h2id="settitle"><ahref="#settitle"class="header-anchor">#</a> setTitle</h2><p>Set the title to the modal window</p><h3id="parameters-4"><ahref="#parameters-4"class="header-anchor">#</a> Parameters</h3><ul><li><code>title</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Title</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>modal<spanclass="token punctuation">.</span><spanclass="token function">setTitle</span><spanclass="token punctuation">(</span><spanclass="token string">'New title'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="gettitle"><ahref="#gettitle"class="header-anchor">#</a> getTitle</h2><p>Returns the title of the modal window</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="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"><pathfill="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><polygonfill="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><h2id="setcontent"><ahref="#setcontent"class="header-anchor">#</a> setContent</h2><p>Set the content of the modal window</p><h3id="parameters-5"><ahref="#parameters-5"class="header-anchor">#</a> Parameters</h3><ul><li><code>content</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="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"><pathfill="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><polygonfill="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> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="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"><pathfill="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><polygonfill="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> Content</li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>modal<spanclass="token punctuation">.</span><spanclass="token function">setContent</span><spanclass="token punctuation">(</span><spanclass="token string">'<div>Some HTML content</div>'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="gettitle"><ahref="#gettitle"class="header-anchor">#</a> getTitle</h2><p>Returns the title of the modal window</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h2id="setcontent"><ahref="#setcontent"class="header-anchor">#</a> setContent</h2><p>Set the content of the modal window</p><h3id="parameters-5"><ahref="#parameters-5"class="header-anchor">#</a> Parameters</h3><ul><li><code>content</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>)</strong> Content</li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>modal<spanclass="token punctuation">.</span><spanclass="token function">setContent</span><spanclass="token punctuation">(</span><spanclass="token string">'<div>Some HTML content</div>'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="getcontent"><ahref="#getcontent"class="header-anchor">#</a> getContent</h2><p>Get the content of the modal window</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="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"><pathfill="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><polygonfill="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><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/modal_dialog.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="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"><pathfill="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><polygonfill="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><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">5/2/2019, 1:28:33 AM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
</code></pre></div><p>Returns <strong>this</strong></p><h2id="getcontent"><ahref="#getcontent"class="header-anchor">#</a> getContent</h2><p>Get the content of the modal window</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong></p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/modal_dialog.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></div><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">10/24/2020, 3:47:30 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
←
←
<ahref="/docs/api/css_composer.html"class="prev">
<ahref="/docs/api/css_composer.html"class="prev">
CSS Composer
CSS Composer
@ -53,6 +54,6 @@ The callback will be called one only time</p> <h3 id="parameters-3"><a href="#pa
</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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> panelManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Panels<spanclass="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> panelManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Panels<spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#addpanel">addPanel</a></li><li><ahref="#addbutton">addButton</a></li><li><ahref="#getbutton">getButton</a></li><li><ahref="#getpanel">getPanel</a></li><li><ahref="#getpanels">getPanels</a></li><li><ahref="#getpanelsel">getPanelsEl</a></li><li><ahref="#removepanel">removePanel</a></li><li><ahref="#removebutton">removeButton</a></li></ul><h2id="getpanels"><ahref="#getpanels"class="header-anchor">#</a> getPanels</h2><p>Returns the collection of panels</p><p>Returns <strong>Collection</strong> Collection of panel</p><h2id="getpanelsel"><ahref="#getpanelsel"class="header-anchor">#</a> getPanelsEl</h2><p>Returns panels element</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="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"><pathfill="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><polygonfill="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><h2id="addpanel"><ahref="#addpanel"class="header-anchor">#</a> addPanel</h2><p>Add new panel to the collection</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>panel</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="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"><pathfill="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><polygonfill="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> | Panel)</strong> Object with right properties or an instance of Panel</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">var</span> newPanel <spanclass="token operator">=</span> panelManager<spanclass="token punctuation">.</span><spanclass="token function">addPanel</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><ul><li><ahref="#addpanel">addPanel</a></li><li><ahref="#addbutton">addButton</a></li><li><ahref="#getbutton">getButton</a></li><li><ahref="#getpanel">getPanel</a></li><li><ahref="#getpanels">getPanels</a></li><li><ahref="#getpanelsel">getPanelsEl</a></li><li><ahref="#removepanel">removePanel</a></li><li><ahref="#removebutton">removeButton</a></li></ul><h2id="getpanels"><ahref="#getpanels"class="header-anchor">#</a> getPanels</h2><p>Returns the collection of panels</p><p>Returns <strong>Collection</strong> Collection of panel</p><h2id="getpanelsel"><ahref="#getpanelsel"class="header-anchor">#</a> getPanelsEl</h2><p>Returns panels element</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h2id="addpanel"><ahref="#addpanel"class="header-anchor">#</a> addPanel</h2><p>Add new panel to the collection</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>panel</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a> | Panel)</strong> Object with right properties or an instance of Panel</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">var</span> newPanel <spanclass="token operator">=</span> panelManager<spanclass="token punctuation">.</span><spanclass="token function">addPanel</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
<svgxmlns="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"><pathfill="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><polygonfill="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><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"aria-current="page"class="active sidebar-link">Rich Text Editor</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#richtexteditor"class="sidebar-link">RichTextEditor</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#gettoolbarel"class="sidebar-link">getToolbarEl</a></li></ul></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="richtexteditor"><ahref="#richtexteditor"class="header-anchor">#</a> RichTextEditor</h2><p>This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the <ahref="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand"target="_blank"rel="noopener noreferrer">HTML Editing APIs<svgxmlns="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"><pathfill="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><polygonfill="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>.
<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"aria-current="page"class="active sidebar-link">Rich Text Editor</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#richtexteditor"class="sidebar-link">RichTextEditor</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#gettoolbarel"class="sidebar-link">getToolbarEl</a></li></ul></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="richtexteditor"><ahref="#richtexteditor"class="header-anchor">#</a> RichTextEditor</h2><p>This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the <ahref="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand"target="_blank"rel="noopener noreferrer">HTML Editing APIs<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>.
It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<svgxmlns="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"><pathfill="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><polygonfill="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> rte <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>RichTextEditor<spanclass="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> rte <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>RichTextEditor<spanclass="token punctuation">;</span>
<svgxmlns="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"><pathfill="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><polygonfill="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><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"aria-current="page"class="active sidebar-link">Selector Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#selectormanager"class="sidebar-link">SelectorManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#setstate"class="sidebar-link">setState</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getstate"class="sidebar-link">getState</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#addclass"class="sidebar-link">addClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#escapename"class="sidebar-link">escapeName</a></li></ul></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="selectormanager"><ahref="#selectormanager"class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"aria-current="page"class="active sidebar-link">Selector Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#selectormanager"class="sidebar-link">SelectorManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#setstate"class="sidebar-link">setState</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getstate"class="sidebar-link">getState</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#addclass"class="sidebar-link">addClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#escapename"class="sidebar-link">escapeName</a></li></ul></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="selectormanager"><ahref="#selectormanager"class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
a look at this code:</p><divclass="language-css extra-class"><preclass="language-css"><code><spanclass="token selector">span > #send-btn.btn</span><spanclass="token punctuation">{</span>
a look at this code:</p><divclass="language-css extra-class"><preclass="language-css"><code><spanclass="token selector">span > #send-btn.btn</span><spanclass="token punctuation">{</span>
</code></pre></div><p>In this scenario we get:</p><ul><li>span -> selector of type <code>tag</code></li><li>send-btn -> selector of type <code>id</code></li><li>btn -> selector of type <code>class</code></li></ul><p>So, for example, being <code>btn</code> the same class entity it'll be easier to refactor and track things.</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<svgxmlns="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"><pathfill="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><polygonfill="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><p>In this scenario we get:</p><ul><li>span -> selector of type <code>tag</code></li><li>send-btn -> selector of type <code>id</code></li><li>btn -> selector of type <code>class</code></li></ul><p>So, for example, being <code>btn</code> the same class entity it'll be easier to refactor and track things.</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> selectorManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>SelectorManager<spanclass="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><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> selectorManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>SelectorManager<spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="getstate"><ahref="#getstate"class="header-anchor">#</a> getState</h2><p>Get the current selector state</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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><h2id="add"><ahref="#add"class="header-anchor">#</a> add</h2><p>Add a new selector to collection if it's not already exists. Class type is a default one</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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> | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="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"><pathfill="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><polygonfill="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> Selector/s name</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="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"><pathfill="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><polygonfill="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> Selector options (optional, default <code>{}</code>)
</code></pre></div><p>Returns <strong>this</strong></p><h2id="getstate"><ahref="#getstate"class="header-anchor">#</a> getState</h2><p>Get the current selector state</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h2id="add"><ahref="#add"class="header-anchor">#</a> add</h2><p>Add a new selector to collection if it's not already exists. Class type is a default one</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a> | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>)</strong> Selector/s name</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Selector options (optional, default <code>{}</code>)
<ul><li><code>opts.label</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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> Label for the selector, if it's not provided the label will be the same as the name (optional, default <code>''</code>)</li><li><code>opts.type</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="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"><pathfill="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><polygonfill="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> Type of the selector. At the moment, only 'class' (1) is available (optional, default <code>1</code>)</li></ul></li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">const</span> selector <spanclass="token operator">=</span> selectorManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'selectorName'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<ul><li><code>opts.label</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Label for the selector, if it's not provided the label will be the same as the name (optional, default <code>''</code>)</li><li><code>opts.type</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Type of the selector. At the moment, only 'class' (1) is available (optional, default <code>1</code>)</li></ul></li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">const</span> selector <spanclass="token operator">=</span> selectorManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'selectorName'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<svgxmlns="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"><pathfill="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><polygonfill="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><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"aria-current="page"class="active sidebar-link">Undo Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undomanager"class="sidebar-link">UndoManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#removeall"class="sidebar-link">removeAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#start"class="sidebar-link">start</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#stop"class="sidebar-link">stop</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undo"class="sidebar-link">undo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undoall"class="sidebar-link">undoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redo"class="sidebar-link">redo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redoall"class="sidebar-link">redoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasundo"class="sidebar-link">hasUndo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasredo"class="sidebar-link">hasRedo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getstack"class="sidebar-link">getStack</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getstackgroup"class="sidebar-link">getStackGroup</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#clear"class="sidebar-link">clear</a></li></ul></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="undomanager"><ahref="#undomanager"class="header-anchor">#</a> UndoManager</h2><p>This module allows to manage the stack of changes applied in canvas.
<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"aria-current="page"class="active sidebar-link">Undo Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undomanager"class="sidebar-link">UndoManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#removeall"class="sidebar-link">removeAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#start"class="sidebar-link">start</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#stop"class="sidebar-link">stop</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undo"class="sidebar-link">undo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undoall"class="sidebar-link">undoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redo"class="sidebar-link">redo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redoall"class="sidebar-link">redoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasundo"class="sidebar-link">hasUndo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasredo"class="sidebar-link">hasRedo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getstack"class="sidebar-link">getStack</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getstackgroup"class="sidebar-link">getStackGroup</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#clear"class="sidebar-link">clear</a></li></ul></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="undomanager"><ahref="#undomanager"class="header-anchor">#</a> UndoManager</h2><p>This module allows to manage the stack of changes applied in canvas.
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> um <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>UndoManager<spanclass="token punctuation">;</span>
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> um <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>UndoManager<spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Configuration object</p><h2id="add"><ahref="#add"class="header-anchor">#</a> add</h2><p>Add an entity (Model/Collection) to track
Note: New Components and CSSRules will be added automatically</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>entity</code><strong>(Model | Collection)</strong> Entity to track</li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span>someModelOrCollection<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
Note: New Components and CSSRules will be added automatically</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>entity</code><strong>(Model | Collection)</strong> Entity to track</li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span>someModelOrCollection<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="remove"><ahref="#remove"class="header-anchor">#</a> remove</h2><p>Remove and stop tracking the entity (Model/Collection)</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>entity</code><strong>(Model | Collection)</strong> Entity to remove</li></ul><h3id="examples-3"><ahref="#examples-3"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">remove</span><spanclass="token punctuation">(</span>someModelOrCollection<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="remove"><ahref="#remove"class="header-anchor">#</a> remove</h2><p>Remove and stop tracking the entity (Model/Collection)</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>entity</code><strong>(Model | Collection)</strong> Entity to remove</li></ul><h3id="examples-3"><ahref="#examples-3"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">remove</span><spanclass="token punctuation">(</span>someModelOrCollection<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="hasundo"><ahref="#hasundo"class="header-anchor">#</a> hasUndo</h2><p>Checks if exists an available undo</p><h3id="examples-11"><ahref="#examples-11"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">hasUndo</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="hasundo"><ahref="#hasundo"class="header-anchor">#</a> hasUndo</h2><p>Checks if exists an available undo</p><h3id="examples-11"><ahref="#examples-11"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">hasUndo</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="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"><pathfill="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><polygonfill="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><h2id="hasredo"><ahref="#hasredo"class="header-anchor">#</a> hasRedo</h2><p>Checks if exists an available redo</p><h3id="examples-12"><ahref="#examples-12"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">hasRedo</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h2id="hasredo"><ahref="#hasredo"class="header-anchor">#</a> hasRedo</h2><p>Checks if exists an available redo</p><h3id="examples-12"><ahref="#examples-12"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">hasRedo</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
The difference between <code>getStack</code> is when you do multiple operations at a time,
The difference between <code>getStack</code> is when you do multiple operations at a time,
like appending multiple components:
like appending multiple components:
<code>editor.getWrapper().append(</code></p><div>C1</div><div>C2</div><code>);</code><code>getStack</code> will return a collection length of 2.
<code>editor.getWrapper().append(</code></p><div>C1</div><div>C2</div><code>);</code><code>getStack</code> will return a collection length of 2.
<code>getStackGroup</code> instead will group them as a single operation (the first
<code>getStackGroup</code> instead will group them as a single operation (the first
inserted component will be returned in the list) by returning an array length of 1.<p></p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="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"><pathfill="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><polygonfill="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><h2id="clear"><ahref="#clear"class="header-anchor">#</a> clear</h2><p>Clear the stack</p><h3id="examples-14"><ahref="#examples-14"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">clear</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
inserted component will be returned in the list) by returning an array length of 1.<p></p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h2id="clear"><ahref="#clear"class="header-anchor">#</a> clear</h2><p>Clear the stack</p><h3id="examples-14"><ahref="#examples-14"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">clear</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{414:function(e,t,o){},454:function(e,t,o){"use strict";o(414)},493:function(e,t,o){"use strict";o.r(t);o(27),o(116),o(76),o(118);vara={name:"CodeGroup",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.codeTabs.forEach((function(e){e.elm.classList.remove("theme-code-block__active")})),this.codeTabs[e].elm.classList.add("theme-code-block__active")}},mounted:function(){vare=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){returnBoolean(e.componentOptions)})).map((function(t,o){return""===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=o),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0)},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e}}},c=(o(454),o(52)),n=Object(c.a)(a,(function(){vare=this,t=e.$createElement,o=e._self._c||t;returno("div",{staticClass:"theme-code-group"},[o("div",{staticClass:"theme-code-group__nav"},[o("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(t,a){returno("li",{key:t.title,staticClass:"theme-code-group__li"},[o("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":a===e.activeCodeTabIndex},on:{click:function(t){returne.changeCodeTab(a)}}},[e._v("\n "+e._s(t.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?o("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)}),[],!1,null,"32c2d7ed",null);t.default=n.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{409:function(t,e,s){"use strict";s.r(e);varn=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){returnn[Math.floor(Math.random()*n.length)]}}},i=s(42),h=Object(i.a)(o,(function(){vart=this.$createElement,e=this._self._c||t;returne("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{501:function(t,e,s){"use strict";s.r(e);varn=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){returnn[Math.floor(Math.random()*n.length)]}}},i=s(52),h=Object(i.a)(o,(function(){vart=this.$createElement,e=this._self._c||t;returne("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{435:function(t,e,s){"use strict";s.r(e);vara=s(42),o=Object(a.a)({},(function(){vart=this.$createElement,e=this._self._c||t;returne("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"api-reference"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),e("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),e("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{512:function(t,e,s){"use strict";s.r(e);vara=s(52),o=Object(a.a)({},(function(){vart=this.$createElement,e=this._self._c||t;returne("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"api-reference"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),e("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),e("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
Artur Arseniev
6 years ago