<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>How did we get here?</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>That's a Four-Oh-Four.</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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">Storag Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="getting-started"><ahref="#getting-started"aria-hidden="true"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">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>path/to/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="getting-started"><ahref="#getting-started"aria-hidden="true"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">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>path/to/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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="active sidebar-link">DOM Components</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#domcomponents"class="sidebar-link">DomComponents</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#load"class="sidebar-link">load</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#store"class="sidebar-link">store</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#getwrapper"class="sidebar-link">getWrapper</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#getcomponents"class="sidebar-link">getComponents</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#addcomponent"class="sidebar-link">addComponent</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#render"class="sidebar-link">render</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#clear"class="sidebar-link">clear</a></li></ul></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></div><divclass="page"><divclass="content"><h2id="domcomponents"><ahref="#domcomponents"aria-hidden="true"class="header-anchor">#</a> DomComponents</h2><p>With this module is possible to manage components inside the canvas. 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/dom_components/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>
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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="active sidebar-link">DOM Components</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#domcomponents"class="sidebar-link">DomComponents</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#load"class="sidebar-link">load</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#store"class="sidebar-link">store</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#getwrapper"class="sidebar-link">getWrapper</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#getcomponents"class="sidebar-link">getComponents</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#addcomponent"class="sidebar-link">addComponent</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#render"class="sidebar-link">render</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#clear"class="sidebar-link">clear</a></li></ul></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></div><divclass="page"><divclass="content"><h2id="domcomponents"><ahref="#domcomponents"aria-hidden="true"class="header-anchor">#</a> DomComponents</h2><p>With this module is possible to manage components inside the canvas. 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/dom_components/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>
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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/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="active sidebar-link">CSS Composer</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#csscomposer"class="sidebar-link">CssComposer</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#load"class="sidebar-link">load</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#store"class="sidebar-link">store</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#clear"class="sidebar-link">clear</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#setidrule"class="sidebar-link">setIdRule</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#getidrule"class="sidebar-link">getIdRule</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#setclassrule"class="sidebar-link">setClassRule</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#getclassrule"class="sidebar-link">getClassRule</a></li></ul></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></div><divclass="page"><divclass="content"><h2id="csscomposer"><ahref="#csscomposer"aria-hidden="true"class="header-anchor">#</a> CssComposer</h2><p>This module contains and manage CSS rules for the template inside the canvas.
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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="active sidebar-link">CSS Composer</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#csscomposer"class="sidebar-link">CssComposer</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#load"class="sidebar-link">load</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#store"class="sidebar-link">store</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#clear"class="sidebar-link">clear</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#setidrule"class="sidebar-link">setIdRule</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#getidrule"class="sidebar-link">getIdRule</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#setclassrule"class="sidebar-link">setClassRule</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#getclassrule"class="sidebar-link">getClassRule</a></li></ul></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></div><divclass="page"><divclass="content"><h2id="csscomposer"><ahref="#csscomposer"aria-hidden="true"class="header-anchor">#</a> CssComposer</h2><p>This module contains and manage CSS rules for the template inside the canvas.
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/css_composer/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>
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/css_composer/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>
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="active sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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/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></div><divclass="page"><divclass="content"><h1id="api-reference"><ahref="#api-reference"aria-hidden="true"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><divclass="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></div><divclass="page-nav"><pclass="inner"><!----><spanclass="next"><ahref="/docs/api/editor.html">
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="active sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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></div><divclass="page"><divclass="content"><h1id="api-reference"><ahref="#api-reference"aria-hidden="true"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><divclass="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></div><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>
</code></pre></div><ul><li><ahref="#open">open</a></li><li><ahref="#close">close</a></li><li><ahref="#isopen">isOpen</a></li><li><ahref="#settitle">setTitle</a></li><li><ahref="#gettitle">getTitle</a></li><li><ahref="#setcontent">setContent</a></li><li><ahref="#getcontent">getContent</a></li></ul><h2id="open"><ahref="#open"aria-hidden="true"class="header-anchor">#</a> open</h2><p>Open the modal window</p><p>Returns <strong>this</strong></p><h2id="close"><ahref="#close"aria-hidden="true"class="header-anchor">#</a> close</h2><p>Close the modal window</p><p>Returns <strong>this</strong></p><h2id="isopen"><ahref="#isopen"aria-hidden="true"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"aria-hidden="true"class="header-anchor">#</a> setTitle</h2><p>Set the title to the modal window</p><h3id="parameters"><ahref="#parameters"aria-hidden="true"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"aria-hidden="true"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>
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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/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="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></div><divclass="page"><divclass="content"><h2id="richtexteditor"><ahref="#richtexteditor"aria-hidden="true"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>.
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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="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></div><divclass="page"><divclass="content"><h2id="richtexteditor"><ahref="#richtexteditor"aria-hidden="true"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>.
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<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>
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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/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="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#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></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></div><divclass="page"><divclass="content"><h2id="selectormanager"><ahref="#selectormanager"aria-hidden="true"class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To get better this concept let's take
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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="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#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></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></div><divclass="page"><divclass="content"><h2id="selectormanager"><ahref="#selectormanager"aria-hidden="true"class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To get better 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>
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="active sidebar-link">Style Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#stylemanager"class="sidebar-link">StyleManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addsector"class="sidebar-link">addSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getsector"class="sidebar-link">getSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#removesector"class="sidebar-link">removeSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getsectors"class="sidebar-link">getSectors</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addproperty"class="sidebar-link">addProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getproperty"class="sidebar-link">getProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#removeproperty"class="sidebar-link">removeProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getproperties"class="sidebar-link">getProperties</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getmodeltostyle"class="sidebar-link">getModelToStyle</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addtype"class="sidebar-link">addType</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#gettype"class="sidebar-link">getType</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#gettypes"class="sidebar-link">getTypes</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#createtype"class="sidebar-link">createType</a></li></ul></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></div><divclass="page"><divclass="content"><h2id="stylemanager"><ahref="#stylemanager"aria-hidden="true"class="header-anchor">#</a> StyleManager</h2><p>With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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="active sidebar-link">Style Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#stylemanager"class="sidebar-link">StyleManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addsector"class="sidebar-link">addSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getsector"class="sidebar-link">getSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#removesector"class="sidebar-link">removeSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getsectors"class="sidebar-link">getSectors</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addproperty"class="sidebar-link">addProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getproperty"class="sidebar-link">getProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#removeproperty"class="sidebar-link">removeProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getproperties"class="sidebar-link">getProperties</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getmodeltostyle"class="sidebar-link">getModelToStyle</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addtype"class="sidebar-link">addType</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#gettype"class="sidebar-link">getType</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#gettypes"class="sidebar-link">getTypes</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#createtype"class="sidebar-link">createType</a></li></ul></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></div><divclass="page"><divclass="content"><h2id="stylemanager"><ahref="#stylemanager"aria-hidden="true"class="header-anchor">#</a> StyleManager</h2><p>With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
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/style_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>
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/style_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>
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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/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="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#clear"class="sidebar-link">clear</a></li></ul></li></ul></div><divclass="page"><divclass="content"><h2id="undomanager"><ahref="#undomanager"aria-hidden="true"class="header-anchor">#</a> UndoManager</h2><p>This module allows to manage the stack of changes applied in canvas.
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</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="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#clear"class="sidebar-link">clear</a></li></ul></li></ul></div><divclass="page"><divclass="content"><h2id="undomanager"><ahref="#undomanager"aria-hidden="true"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>
(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{173:function(e,t,a){"use strict";a.r(t);varn=a(1),s=Object(n.a)({},function(){vare=this.$createElement,t=this._self._c||e;returnt("div",{staticClass:"content"},[this._m(0),t("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 "),t("router-link",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])},[function(){vare=this.$createElement,t=this._self._c||e;returnt("h1",{attrs:{id:"api-reference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api-reference","aria-hidden":"true"}},[this._v("#")]),this._v(" API Reference")])}],!1,null,null,null);t.default=s.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{256:function(e,t,a){"use strict";a.r(t);varn=a(1),s=Object(n.a)({},function(){vare=this.$createElement,t=this._self._c||e;returnt("div",{staticClass:"content"},[this._m(0),t("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 "),t("router-link",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])},[function(){vare=this.$createElement,t=this._self._c||e;returnt("h1",{attrs:{id:"api-reference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api-reference","aria-hidden":"true"}},[this._v("#")]),this._v(" API Reference")])}],!1,null,null,null);s.options.__file="README.md";t.default=s.exports}}]);
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="active sidebar-link">Getting Started</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#import-the-library"class="sidebar-link">Import the library</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#start-from-the-canvas"class="sidebar-link">Start from the canvas</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#add-blocks"class="sidebar-link">Add Blocks</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#define-components"class="sidebar-link">Define Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#panels-buttons"class="sidebar-link">Panels & Buttons</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#layers"class="sidebar-link">Layers</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#style-manager"class="sidebar-link">Style Manager</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#traits"class="sidebar-link">Traits</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#responsive-templates"class="sidebar-link">Responsive templates</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#store-load-data"class="sidebar-link">Store & load data</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#theming"class="sidebar-link">Theming</a></li></ul></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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">Storag Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="getting-started"><ahref="#getting-started"aria-hidden="true"class="header-anchor">#</a> Getting Started</h1><p>This guide is a step-by-step introduction for everyone who wants to start creating its own builder with GrapesJS. This is not a complete guide of all functionalities but just a concise overview of most common modules.
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="active sidebar-link">Getting Started</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#import-the-library"class="sidebar-link">Import the library</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#start-from-the-canvas"class="sidebar-link">Start from the canvas</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#add-blocks"class="sidebar-link">Add Blocks</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#define-components"class="sidebar-link">Define Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#panels-buttons"class="sidebar-link">Panels & Buttons</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#layers"class="sidebar-link">Layers</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#style-manager"class="sidebar-link">Style Manager</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#traits"class="sidebar-link">Traits</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#responsive-templates"class="sidebar-link">Responsive templates</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#store-load-data"class="sidebar-link">Store & load data</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#theming"class="sidebar-link">Theming</a></li></ul></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="getting-started"><ahref="#getting-started"aria-hidden="true"class="header-anchor">#</a> Getting Started</h1><p>This guide is a step-by-step introduction for everyone who wants to start creating its own builder with GrapesJS. This is not a complete guide of all functionalities but just a concise overview of most common modules.
Let's see how to create a completely customized page builder from scratch. The last demo of this page represents the <ahref="#final-result">final result</a></p><h2id="import-the-library"><ahref="#import-the-library"aria-hidden="true"class="header-anchor">#</a> Import the library</h2><p>Before start using GrapesJS you have to import it inside your project, so let's import its latest version</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">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>//unpkg.com/grapesjs/dist/css/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
Let's see how to create a completely customized page builder from scratch. The last demo of this page represents the <ahref="#final-result">final result</a></p><h2id="import-the-library"><ahref="#import-the-library"aria-hidden="true"class="header-anchor">#</a> Import the library</h2><p>Before start using GrapesJS you have to import it inside your project, so let's import its latest version</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">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>//unpkg.com/grapesjs/dist/css/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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">Storag Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="active sidebar-link">Replace Rich Text Editor</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#interface"class="sidebar-link">Interface</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#toolbar-position"class="sidebar-link">Toolbar position</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#the-built-in-vs-third-party"class="sidebar-link">The built-in vs third-party</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#plugins"class="sidebar-link">Plugins</a></li></ul></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="replace-the-built-in-rich-text-editor"><ahref="#replace-the-built-in-rich-text-editor"aria-hidden="true"class="header-anchor">#</a> Replace the built-in Rich Text Editor</h1><p>As you might have noticed the default Rich Text Editor (RTE) is really tiny and so doesn't seem like a complete solution as a text editor. Instead of showing how to add new commands inside the default one we'll show how to completely replace it with another one.</p><p>In the following guide we'll integrate the CKEditor and to accomplish this task we just need to provide few functions to the GrapesJS API method <code>setCustomRte</code> as an interface.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#interface">Interface</a><ul><li><ahref="#enable">Enable</a></li><li><ahref="#disable">Disable</a></li><li><ahref="#focus">Focus</a></li></ul></li><li><ahref="#toolbar-position">Toolbar position</a></li><li><ahref="#the-built-in-vs-third-party">The built-in vs third-party</a></li><li><ahref="#plugins">Plugins</a></li></ul></div><p></p><h2id="interface"><ahref="#interface"aria-hidden="true"class="header-anchor">#</a> Interface</h2><h3id="enable"><ahref="#enable"aria-hidden="true"class="header-anchor">#</a> Enable</h3><p>The first step is to indicate how to enable the third-party library and so for we gonna start with the <code>enable()</code> function. This method should take care of the first initialization of our custom RTE but also for the next time is called on the same element, this is why there is the <code>rte</code> argument.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="active sidebar-link">Replace Rich Text Editor</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#interface"class="sidebar-link">Interface</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#toolbar-position"class="sidebar-link">Toolbar position</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#the-built-in-vs-third-party"class="sidebar-link">The built-in vs third-party</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#plugins"class="sidebar-link">Plugins</a></li></ul></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="replace-the-built-in-rich-text-editor"><ahref="#replace-the-built-in-rich-text-editor"aria-hidden="true"class="header-anchor">#</a> Replace the built-in Rich Text Editor</h1><p>As you might have noticed the default Rich Text Editor (RTE) is really tiny and so doesn't seem like a complete solution as a text editor. Instead of showing how to add new commands inside the default one we'll show how to completely replace it with another one.</p><p>In the following guide we'll integrate the CKEditor and to accomplish this task we just need to provide few functions to the GrapesJS API method <code>setCustomRte</code> as an interface.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#interface">Interface</a><ul><li><ahref="#enable">Enable</a></li><li><ahref="#disable">Disable</a></li><li><ahref="#focus">Focus</a></li></ul></li><li><ahref="#toolbar-position">Toolbar position</a></li><li><ahref="#the-built-in-vs-third-party">The built-in vs third-party</a></li><li><ahref="#plugins">Plugins</a></li></ul></div><p></p><h2id="interface"><ahref="#interface"aria-hidden="true"class="header-anchor">#</a> Interface</h2><h3id="enable"><ahref="#enable"aria-hidden="true"class="header-anchor">#</a> Enable</h3><p>The first step is to indicate how to enable the third-party library and so for we gonna start with the <code>enable()</code> function. This method should take care of the first initialization of our custom RTE but also for the next time is called on the same element, this is why there is the <code>rte</code> argument.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="active sidebar-link">Asset Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#configuration"class="sidebar-link">Configuration</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#initialization"class="sidebar-link">Initialization</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#customization"class="sidebar-link">Customization</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#uploading-assets"class="sidebar-link">Uploading assets</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#events"class="sidebar-link">Events</a></li></ul></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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">Storag Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="asset-manager"><ahref="#asset-manager"aria-hidden="true"class="header-anchor">#</a> Asset Manager</h1><palign="center"><imgsrc="http://grapesjs.com/img/sc-grapesjs-assets-1.jpg"alt="GrapesJS - Asset Manager"align="center"></p><p>In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS, which is intentionally lightweight and implements just an <code>image</code> in its core, but as you'll see next it's easy to extend and create your own asset types.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#configuration">Configuration</a></li><li><ahref="#initialization">Initialization</a></li><li><ahref="#customization">Customization</a><ul><li><ahref="#define-new-asset-type">Define new Asset type</a></li><li><ahref="#extend-asset-types">Extend Asset Types</a></li></ul></li><li><ahref="#uploading-assets">Uploading assets</a><ul><li><ahref="#listeners">Listeners</a></li><li><ahref="#response">Response</a></li><li><ahref="#setup-dropzone">Setup Dropzone</a></li></ul></li><li><ahref="#events">Events</a></li></ul></div><p></p><h2id="configuration"><ahref="#configuration"aria-hidden="true"class="header-anchor">#</a> Configuration</h2><p>To change default configurations you have to pass <code>assetManager</code> property with the main configuration object</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>
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="active sidebar-link">Asset Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#configuration"class="sidebar-link">Configuration</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#initialization"class="sidebar-link">Initialization</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#customization"class="sidebar-link">Customization</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#uploading-assets"class="sidebar-link">Uploading assets</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#events"class="sidebar-link">Events</a></li></ul></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="asset-manager"><ahref="#asset-manager"aria-hidden="true"class="header-anchor">#</a> Asset Manager</h1><palign="center"><imgsrc="http://grapesjs.com/img/sc-grapesjs-assets-1.jpg"alt="GrapesJS - Asset Manager"align="center"></p><p>In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS, which is intentionally lightweight and implements just an <code>image</code> in its core, but as you'll see next it's easy to extend and create your own asset types.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#configuration">Configuration</a></li><li><ahref="#initialization">Initialization</a></li><li><ahref="#customization">Customization</a><ul><li><ahref="#define-new-asset-type">Define new Asset type</a></li><li><ahref="#extend-asset-types">Extend Asset Types</a></li></ul></li><li><ahref="#uploading-assets">Uploading assets</a><ul><li><ahref="#listeners">Listeners</a></li><li><ahref="#response">Response</a></li><li><ahref="#setup-dropzone">Setup Dropzone</a></li></ul></li><li><ahref="#events">Events</a></li></ul></div><p></p><h2id="configuration"><ahref="#configuration"aria-hidden="true"class="header-anchor">#</a> Configuration</h2><p>To change default configurations you have to pass <code>assetManager</code> property with the main configuration object</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>
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="active sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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">Storag Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="block-manager"><ahref="#block-manager"aria-hidden="true"class="header-anchor">#</a> Block Manager</h1><palign="center"><imgsrc="http://grapesjs.com/img/sc-grapesjs-blocks-prp.jpg"alt="GrapesJS - Block Manager"height="400"align="center"></p><p>The Block is a group of <ahref="Components">Components</a> and can be easily reused inside templates.</p><p>To better understand the difference between components and blocks, the component is more atomic so, for example, a single image, a text box or a map fits perfectly in this concept. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).</p><p>Check <ahref="Components">Components</a> page to see the list of built-in components and how to create your own.</p><p>Let's see how to add a new block to the editor using the <ahref="API-Block-Manager">Blocks API</a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="active sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="block-manager"><ahref="#block-manager"aria-hidden="true"class="header-anchor">#</a> Block Manager</h1><palign="center"><imgsrc="http://grapesjs.com/img/sc-grapesjs-blocks-prp.jpg"alt="GrapesJS - Block Manager"height="400"align="center"></p><p>The Block is a group of <ahref="Components">Components</a> and can be easily reused inside templates.</p><p>To better understand the difference between components and blocks, the component is more atomic so, for example, a single image, a text box or a map fits perfectly in this concept. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).</p><p>Check <ahref="Components">Components</a> page to see the list of built-in components and how to create your own.</p><p>Let's see how to add a new block to the editor using the <ahref="API-Block-Manager">Blocks API</a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="active sidebar-link">Components & JS</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#basic-scripts"class="sidebar-link">Basic scripts</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#dependencies"class="sidebar-link">Dependencies</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#examples"class="sidebar-link">Examples</a></li></ul></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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">Storag Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="components-js"><ahref="#components-js"aria-hidden="true"class="header-anchor">#</a> Components & JS</h1><p>In this guide you'll see how to attach component related scripts and deal with external javascript libraries (for stuff like counters, galleries, slideshows, etc.)</p><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-scripts">Basic scripts</a></li><li><ahref="#dependencies">Dependencies</a><ul><li><ahref="#component-related">Component related</a></li><li><ahref="#template-related">Template related</a></li></ul></li><li><ahref="#examples">Examples</a></li></ul></div><p></p><h2id="basic-scripts"><ahref="#basic-scripts"aria-hidden="true"class="header-anchor">#</a> Basic scripts</h2><p>Let's see how to create a component with scripts using Blocks.</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'test-block'</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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="active sidebar-link">Components & JS</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#basic-scripts"class="sidebar-link">Basic scripts</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#dependencies"class="sidebar-link">Dependencies</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#examples"class="sidebar-link">Examples</a></li></ul></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="components-js"><ahref="#components-js"aria-hidden="true"class="header-anchor">#</a> Components & JS</h1><p>In this guide you'll see how to attach component related scripts and deal with external javascript libraries (for stuff like counters, galleries, slideshows, etc.)</p><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-scripts">Basic scripts</a></li><li><ahref="#dependencies">Dependencies</a><ul><li><ahref="#component-related">Component related</a></li><li><ahref="#template-related">Template related</a></li></ul></li><li><ahref="#examples">Examples</a></li></ul></div><p></p><h2id="basic-scripts"><ahref="#basic-scripts"aria-hidden="true"class="header-anchor">#</a> Basic scripts</h2><p>Let's see how to create a component with scripts using Blocks.</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'test-block'</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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="active sidebar-link">Component Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#built-in-components"class="sidebar-link">Built-in components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#how-components-work"class="sidebar-link">How Components work?</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#component-recognition"class="sidebar-link">Component recognition</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#define-new-component"class="sidebar-link">Define new Component</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#update-component-type"class="sidebar-link">Update Component type</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#components-js"class="sidebar-link">Components & JS</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#hints"class="sidebar-link">Hints</a></li></ul></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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">Storag Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="component-manager"><ahref="#component-manager"aria-hidden="true"class="header-anchor">#</a> Component Manager</h1><p>The Component is the base element for the template composition and, usually, elements like images, text boxes, maps, etc. fit perfectly in this concept. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-components">Built-in components</a></li><li><ahref="#how-components-work">How Components work?</a></li><li><ahref="#component-recognition">Component recognition</a></li><li><ahref="#define-new-component">Define new Component</a></li><li><ahref="#update-component-type">Update Component type</a></li><li><ahref="#components-js">Components & JS</a></li><li><ahref="#hints">Hints</a></li></ul></div><p></p><h2id="built-in-components"><ahref="#built-in-components"aria-hidden="true"class="header-anchor">#</a> Built-in components</h2><ul><li>Default (Basic)</li><li>Text</li><li>Image</li><li>Video</li><li>Link</li><li>Map</li><li>Table</li><li>Row (for the table)</li><li>Cell (for the table)</li></ul><h2id="how-components-work"><ahref="#how-components-work"aria-hidden="true"class="header-anchor">#</a> How Components work?</h2><p>When we pass an HTML string to the editor like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token punctuation">></span></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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="active sidebar-link">Component Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#built-in-components"class="sidebar-link">Built-in components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#how-components-work"class="sidebar-link">How Components work?</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#component-recognition"class="sidebar-link">Component recognition</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#define-new-component"class="sidebar-link">Define new Component</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#update-component-type"class="sidebar-link">Update Component type</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#components-js"class="sidebar-link">Components & JS</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#hints"class="sidebar-link">Hints</a></li></ul></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="component-manager"><ahref="#component-manager"aria-hidden="true"class="header-anchor">#</a> Component Manager</h1><p>The Component is the base element for the template composition and, usually, elements like images, text boxes, maps, etc. fit perfectly in this concept. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-components">Built-in components</a></li><li><ahref="#how-components-work">How Components work?</a></li><li><ahref="#component-recognition">Component recognition</a></li><li><ahref="#define-new-component">Define new Component</a></li><li><ahref="#update-component-type">Update Component type</a></li><li><ahref="#components-js">Components & JS</a></li><li><ahref="#hints">Hints</a></li></ul></div><p></p><h2id="built-in-components"><ahref="#built-in-components"aria-hidden="true"class="header-anchor">#</a> Built-in components</h2><ul><li>Default (Basic)</li><li>Text</li><li>Image</li><li>Video</li><li>Link</li><li>Map</li><li>Table</li><li>Row (for the table)</li><li>Cell (for the table)</li></ul><h2id="how-components-work"><ahref="#how-components-work"aria-hidden="true"class="header-anchor">#</a> How Components work?</h2><p>When we pass an HTML string to the editor like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token punctuation">></span></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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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">Storag Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="active sidebar-link">Plugins</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#basic-plugin"class="sidebar-link">Basic plugin</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#plugins-with-options"class="sidebar-link">Plugins with options</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#boilerplate"class="sidebar-link">Boilerplate</a></li></ul></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="plugins"><ahref="#plugins"aria-hidden="true"class="header-anchor">#</a> Plugins</h1><p>Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-plugin">Basic plugin</a></li><li><ahref="#plugins-with-options">Plugins with options</a></li><li><ahref="#boilerplate">Boilerplate</a></li></ul></div><p></p><h2id="basic-plugin"><ahref="#basic-plugin"aria-hidden="true"class="header-anchor">#</a> Basic plugin</h2><p>Generally, you would make plugins in separated files to keep thing cleaner, so you'll probably get a similar structure:</p><divclass="language- extra-class"><preclass="language-text"><code>/your/path/to/grapesjs.min.js
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</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="active sidebar-link">Plugins</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#basic-plugin"class="sidebar-link">Basic plugin</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#named-plugin"class="sidebar-link">Named plugin</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#plugins-with-options"class="sidebar-link">Plugins with options</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#named-plugins-vs-non-named-plugins"class="sidebar-link">Named Plugins vs Non-Named Plugins</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#boilerplate"class="sidebar-link">Boilerplate</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#popular-plugins"class="sidebar-link">Popular Plugins</a></li></ul></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="plugins"><ahref="#plugins"aria-hidden="true"class="header-anchor">#</a> Plugins</h1><p>Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-plugin">Basic plugin</a></li><li><ahref="#named-plugin">Named plugin</a></li><li><ahref="#plugins-with-options">Plugins with options</a></li><li><ahref="#named-plugins-vs-non-named-plugins">Named Plugins vs Non-Named Plugins</a></li><li><ahref="#boilerplate">Boilerplate</a></li><li><ahref="#popular-plugins">Popular Plugins</a></li></ul></div><p></p><h2id="basic-plugin"><ahref="#basic-plugin"aria-hidden="true"class="header-anchor">#</a> Basic plugin</h2><p>The most simple plugins are just functions that are run when the editor is being built.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">function</span><spanclass="token function">myPlugin</span><spanclass="token punctuation">(</span>editor<spanclass="token punctuation">)</span><spanclass="token punctuation">{</span>
content<spanclass="token punctuation">:</span><spanclass="token string">'<div class="my-block">This is a simple block</div>'</span><spanclass="token punctuation">,</span>
</code></pre></div><p>This means that plugins can be moved to separate folders to keep thing cleaner or imported from NPM.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">import</span> myPlugin <spanclass="token keyword">from</span><spanclass="token string">'./plugins/myPlugin'</span>
</code></pre></div><h2id="named-plugin"><ahref="#named-plugin"aria-hidden="true"class="header-anchor">#</a> Named plugin</h2><p>If you're distributing your plugin globally, you may want to make a named plugin. To keep thing cleaner, so you'll probably get a similar structure:</p><divclass="language- extra-class"><preclass="language-text"><code>/your/path/to/grapesjs.min.js
/your/path/to/grapesjs-plugin.js
/your/path/to/grapesjs-plugin.js
</code></pre></div><p>The order is important as before loading your plugin, GrapesJS have to be loaded first.</p><p>So, in your <code>grapesjs-plugin.js</code> file:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">export</span><spanclass="token keyword">default</span> grapesjs<spanclass="token punctuation">.</span>plugins<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'my-plugin-name'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">(</span>editor<spanclass="token punctuation">,</span> options<spanclass="token punctuation">)</span><spanclass="token operator">=></span><spanclass="token punctuation">{</span>
</code></pre></div><p><strong>Important:</strong> The order that you load files matters. GrapesJS has to be loaded before the plugin. This sets up the <code>grapejs</code> global variable.</p><p>So, in your <code>grapesjs-plugin.js</code> file:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">export</span><spanclass="token keyword">default</span> grapesjs<spanclass="token punctuation">.</span>plugins<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'my-plugin-name'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">(</span>editor<spanclass="token punctuation">,</span> options<spanclass="token punctuation">)</span><spanclass="token operator">=></span><spanclass="token punctuation">{</span>
<spanclass="token comment">/*
<spanclass="token comment">/*
* Here you should rely on GrapesJS APIs, so check 'API Reference' for more info
* Here you should rely on GrapesJS APIs, so check 'API Reference' for more info
* For example, you could do something like this to add some new command:
* For example, you could do something like this to add some new command:
</code></pre></div><h2id="plugins-with-options"><ahref="#plugins-with-options"aria-hidden="true"class="header-anchor">#</a> Plugins with options</h2><p>It's also possible to pass custom parameters to plugins in the way to make them more flexible.</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>script</span><spanclass="token attr-name">type</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>text/javascript<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span><spanclass="token script language-javascript">
</code></pre></div><h2id="plugins-with-options"><ahref="#plugins-with-options"aria-hidden="true"class="header-anchor">#</a> Plugins with options</h2><p>It's also possible to pass custom parameters to plugins in to make them more flexible.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</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><h2id="boilerplate"><ahref="#boilerplate"aria-hidden="true"class="header-anchor">#</a> Boilerplate</h2><p>If you want to start with a production-ready boilerplate, you might want to try <ahref="https://github.com/artf/grapesjs-plugin-boilerplate"target="_blank"rel="noopener noreferrer">grapesjs-plugin-boilerplate<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> which you can clone and start developing a plugin immediately. For more informations check the repository</p></div><divclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/modules/Plugins.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/7/2018, 4:18:04 PM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
</code></pre></div><p>This also works with plugins that aren't named.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">import</span> myPlugin <spanclass="token keyword">from</span><spanclass="token string">'../plugin'</span>
</code></pre></div><h2id="named-plugins-vs-non-named-plugins"><ahref="#named-plugins-vs-non-named-plugins"aria-hidden="true"class="header-anchor">#</a> Named Plugins vs Non-Named Plugins</h2><p>When you use a named plugin, then that name must be unique across all other plugins.</p><divclass="language-js extra-class"><preclass="language-js"><code>grapesjs<spanclass="token punctuation">.</span>plugins<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'my-plugin-name'</span><spanclass="token punctuation">,</span> fn<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>In this example, the plugin name is <code>my-plugin-name</code> and can't be used by other plugins. To avoid namespace restrictions use basic plugins that are purely functional.</p><h2id="boilerplate"><ahref="#boilerplate"aria-hidden="true"class="header-anchor">#</a> Boilerplate</h2><p>If you want to start with a production-ready boilerplate for a named plugin, you might want to try <ahref="https://github.com/artf/grapesjs-plugin-boilerplate"target="_blank"rel="noopener noreferrer">grapesjs-plugin-boilerplate<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> which you can clone and start developing a named plugin immediately. For more informations check the repository</p><h2id="popular-plugins"><ahref="#popular-plugins"aria-hidden="true"class="header-anchor">#</a> Popular Plugins</h2><ul><li>https://github.com/artf/grapesjs-preset-webpage</li><li>https://github.com/artf/grapesjs-preset-newsletter</li></ul></div><divclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/modules/Plugins.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">8/2/2018, 1:42:17 AM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="active sidebar-link">Storag Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#basic-configuration"class="sidebar-link">Basic configuration</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#setup-remote-storage"class="sidebar-link">Setup remote storage</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#store-and-load-templates"class="sidebar-link">Store and load templates</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#setup-the-server"class="sidebar-link">Setup the server</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#storage-api"class="sidebar-link">Storage API</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#events"class="sidebar-link">Events</a></li></ul></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="storage-manager"><ahref="#storage-manager"aria-hidden="true"class="header-anchor">#</a> Storage Manager</h1><p>The aim of this guide is to show how to setup correctly your storage configuration for common usages of the editor and explain also some additional advanced settings</p><divclass="warning custom-block"><pclass="custom-block-title">WARNING</p><p>This guide requires GrapesJS v0.14.15 or higher</p></div><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-configuration">Basic configuration</a></li><li><ahref="#setup-remote-storage">Setup remote storage</a></li><li><ahref="#store-and-load-templates">Store and load templates</a></li><li><ahref="#setup-the-server">Setup the server</a></li><li><ahref="#storage-api">Storage API</a><ul><li><ahref="#define-new-storage">Define new storage</a></li><li><ahref="#extend-storage">Extend storage</a></li><li><ahref="#examples">Examples</a></li></ul></li><li><ahref="#events">Events</a></li></ul></div><p></p><h2id="basic-configuration"><ahref="#basic-configuration"aria-hidden="true"class="header-anchor">#</a> Basic configuration</h2><p>The storage manager is a built-in module implemented inside GrapesJS which allows the persistence of your data. By default, GrapesJS saves the data locally by using the built-in <code>LocalStorage</code> which just leverages <ahref="https://developer.mozilla.org/it/docs/Web/API/Window/localStorage"target="_blank"rel="noopener noreferrer">localStorage API<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>.
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="active sidebar-link">Storage Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#basic-configuration"class="sidebar-link">Basic configuration</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#setup-remote-storage"class="sidebar-link">Setup remote storage</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#store-and-load-templates"class="sidebar-link">Store and load templates</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#setup-the-server"class="sidebar-link">Setup the server</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#storage-api"class="sidebar-link">Storage API</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#events"class="sidebar-link">Events</a></li></ul></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="storage-manager"><ahref="#storage-manager"aria-hidden="true"class="header-anchor">#</a> Storage Manager</h1><p>The aim of this guide is to show how to setup correctly your storage configuration for common usages of the editor and explain also some additional advanced settings</p><divclass="warning custom-block"><pclass="custom-block-title">WARNING</p><p>This guide requires GrapesJS v0.14.15 or higher</p></div><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-configuration">Basic configuration</a></li><li><ahref="#setup-remote-storage">Setup remote storage</a></li><li><ahref="#store-and-load-templates">Store and load templates</a></li><li><ahref="#setup-the-server">Setup the server</a></li><li><ahref="#storage-api">Storage API</a><ul><li><ahref="#define-new-storage">Define new storage</a></li><li><ahref="#extend-storage">Extend storage</a></li><li><ahref="#examples">Examples</a></li></ul></li><li><ahref="#events">Events</a></li></ul></div><p></p><h2id="basic-configuration"><ahref="#basic-configuration"aria-hidden="true"class="header-anchor">#</a> Basic configuration</h2><p>The storage manager is a built-in module implemented inside GrapesJS which allows the persistence of your data. By default, GrapesJS saves the data locally by using the built-in <code>LocalStorage</code> which just leverages <ahref="https://developer.mozilla.org/it/docs/Web/API/Window/localStorage"target="_blank"rel="noopener noreferrer">localStorage API<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>.
You can initialize the editor with different storage configurations via <code>storageManager</code> option:</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>
You can initialize the editor with different storage configurations via <code>storageManager</code> option:</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>
<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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="active sidebar-link">Trait Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#built-in-trait-types"class="sidebar-link">Built-in trait types</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#add-traits-to-components"class="sidebar-link">Add Traits to Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#define-new-trait-type"class="sidebar-link">Define new Trait type</a></li></ul></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storag Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="trait-manager"><ahref="#trait-manager"aria-hidden="true"class="header-anchor">#</a> Trait Manager</h1><p>In GrapesJS, Traits could define different parameters and behaviors of a single component. The user generally will see traits as <em>Settings</em> of each component. A common use of traits is to customize element attributes (eg. <code>placeholder</code> for inputs) and in this case the editor comes already with some built-in, easy configurable, types.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-trait-types">Built-in trait types</a></li><li><ahref="#add-traits-to-components">Add Traits to Components</a></li><li><ahref="#define-new-trait-type">Define new Trait type</a></li></ul></div><p></p><h2id="built-in-trait-types"><ahref="#built-in-trait-types"aria-hidden="true"class="header-anchor">#</a> Built-in trait types</h2><ul><li>text</li><li>number</li><li>checkbox</li><li>select</li><li>color</li></ul><h2id="add-traits-to-components"><ahref="#add-traits-to-components"aria-hidden="true"class="header-anchor">#</a> Add Traits to Components</h2><p>You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:</p><imgsrc="/docs/default-traits.png"><p>In this case we gonna create a new Component (<ahref="Components">check here</a> for more details about the creation of new components) with a new set of traits</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</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><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="active sidebar-link">Trait Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#built-in-trait-types"class="sidebar-link">Built-in trait types</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#add-traits-to-components"class="sidebar-link">Add Traits to Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#define-new-trait-type"class="sidebar-link">Define new Trait type</a></li></ul></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></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="trait-manager"><ahref="#trait-manager"aria-hidden="true"class="header-anchor">#</a> Trait Manager</h1><p>In GrapesJS, Traits could define different parameters and behaviors of a single component. The user generally will see traits as <em>Settings</em> of each component. A common use of traits is to customize element attributes (eg. <code>placeholder</code> for inputs) and in this case the editor comes already with some built-in, easy configurable, types.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-trait-types">Built-in trait types</a></li><li><ahref="#add-traits-to-components">Add Traits to Components</a></li><li><ahref="#define-new-trait-type">Define new Trait type</a></li></ul></div><p></p><h2id="built-in-trait-types"><ahref="#built-in-trait-types"aria-hidden="true"class="header-anchor">#</a> Built-in trait types</h2><ul><li>text</li><li>number</li><li>checkbox</li><li>select</li><li>color</li></ul><h2id="add-traits-to-components"><ahref="#add-traits-to-components"aria-hidden="true"class="header-anchor">#</a> Add Traits to Components</h2><p>You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:</p><imgsrc="/docs/default-traits.png"><p>In this case we gonna create a new Component (<ahref="Components">check here</a> for more details about the creation of new components) with a new set of traits</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
Artur Arseniev
8 years ago