<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="theme-default-content"><h1>404</h1><blockquote>How did we get here?</blockquote><ahref="/docs/"class="router-link-active">
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/I18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Traits</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></section></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="getting-started"><ahref="#getting-started"class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation">=</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><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"aria-current="page"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/I18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Traits</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></section></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="getting-started"><ahref="#getting-started"class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>path/to/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="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#setrule"class="sidebar-link">setRule</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#getrule"class="sidebar-link">getRule</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></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="csscomposer"><ahref="#csscomposer"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><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"aria-current="page"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#setrule"class="sidebar-link">setRule</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/css_composer.html#getrule"class="sidebar-link">getRule</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></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="csscomposer"><ahref="#csscomposer"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>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="active sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="api-reference"><ahref="#api-reference"class="header-anchor">#</a> API Reference</h1><p>Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also <ahref="/docs/modules/Plugins.html">create a plugin</a> and make those extensions reusable and available to others.</p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/README.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">7/9/2018, 1:03:59 AM</span></div></footer><divclass="page-nav"><pclass="inner"><!----><spanclass="next"><ahref="/docs/api/editor.html">
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="active sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="api-reference"><ahref="#api-reference"class="header-anchor">#</a> API Reference</h1><p>Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also <ahref="/docs/modules/Plugins.html">create a plugin</a> and make those extensions reusable and available to others.</p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/README.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">7/9/2018, 1:03:59 AM</span></div></footer><divclass="page-nav"><pclass="inner"><!----><spanclass="next"><ahref="/docs/api/editor.html">
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="active sidebar-link">Rich Text Editor</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#richtexteditor"class="sidebar-link">RichTextEditor</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#gettoolbarel"class="sidebar-link">getToolbarEl</a></li></ul></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="richtexteditor"><ahref="#richtexteditor"class="header-anchor">#</a> RichTextEditor</h2><p>This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the <ahref="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand"target="_blank"rel="noopener noreferrer">HTML Editing APIs<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"aria-current="page"class="active sidebar-link">Rich Text Editor</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#richtexteditor"class="sidebar-link">RichTextEditor</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#gettoolbarel"class="sidebar-link">getToolbarEl</a></li></ul></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="richtexteditor"><ahref="#richtexteditor"class="header-anchor">#</a> RichTextEditor</h2><p>This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the <ahref="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand"target="_blank"rel="noopener noreferrer">HTML Editing APIs<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.
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><divid="native-carbon"class="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/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="active sidebar-link">Selector Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#selectormanager"class="sidebar-link">SelectorManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#setstate"class="sidebar-link">setState</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getstate"class="sidebar-link">getState</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#addclass"class="sidebar-link">addClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#escapename"class="sidebar-link">escapeName</a></li></ul></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="selectormanager"><ahref="#selectormanager"class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"aria-current="page"class="active sidebar-link">Selector Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#selectormanager"class="sidebar-link">SelectorManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#setstate"class="sidebar-link">setState</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getstate"class="sidebar-link">getState</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#addclass"class="sidebar-link">addClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#escapename"class="sidebar-link">escapeName</a></li></ul></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="selectormanager"><ahref="#selectormanager"class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
a look at this code:</p><divclass="language-css extra-class"><preclass="language-css"><code><spanclass="token selector">span > #send-btn.btn</span><spanclass="token punctuation">{</span>
</code></pre></div><p>In this scenario we get:</p><ul><li>span -> selector of type <code>tag</code></li><li>send-btn -> selector of type <code>id</code></li><li>btn -> selector of type <code>class</code></li></ul><p>So, for example, being <code>btn</code> the same class entity it'll be easier to refactor and track things.</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="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><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#settarget"class="sidebar-link">setTarget</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></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="stylemanager"><ahref="#stylemanager"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><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"aria-current="page"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><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#settarget"class="sidebar-link">setTarget</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></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="stylemanager"><ahref="#stylemanager"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>
</code></pre></div><p>Returns <strong>Properties</strong> Collection of properties</p><h2id="getmodeltostyle"><ahref="#getmodeltostyle"class="header-anchor">#</a> getModelToStyle</h2><p>Get what to style inside Style Manager. If you select the component
@ -74,14 +74,28 @@ go inside its 'style' property. Otherwise, if the selected component has
one or more classes, the function will return the corresponding CSS Rule</p><h3id="parameters-8"><ahref="#parameters-8"class="header-anchor">#</a> Parameters</h3><ul><li><code>model</code><strong>Model</strong></li><li><code>options</code> (optional, default <code>{}</code>)</li></ul><p>Returns <strong>Model</strong></p><h2id="addtype"><ahref="#addtype"class="header-anchor">#</a> addType</h2><p>Add new property type</p><h3id="parameters-9"><ahref="#parameters-9"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Type ID</li><li><code>definition</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Definition of the type. Each definition contains
<spanclass="token comment">// In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.</span>
</code></pre></div><p>Returns <strong>PropertyView</strong></p><h2id="settarget"><ahref="#settarget"class="header-anchor">#</a> setTarget</h2><p>Select different target for the Style Manager.
It could be a Component, CSSRule, or a string of any CSS selector</p><h3id="parameters-12"><ahref="#parameters-12"class="header-anchor">#</a> Parameters</h3><ul><li><code>target</code><strong>(Component | CSSRule | <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></li><li><code>opts</code></li></ul><p>Returns <strong>Styleable</strong> A Component or CSSRule</p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/style_manager.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">4/23/2020, 1:46:38 AM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
It could be a Component, CSSRule, or a string of any CSS selector</p><h3id="parameters-12"><ahref="#parameters-12"class="header-anchor">#</a> Parameters</h3><ul><li><code>target</code><strong>(Component | CSSRule | <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></li><li><code>opts</code></li></ul><p>Returns <strong>Styleable</strong> A Component or CSSRule</p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/style_manager.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">9/2/2020, 2:16:24 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
←
<ahref="/docs/api/panels.html"class="prev">
Panels
@ -100,6 +114,6 @@ It could be a Component, CSSRule, or a string of any CSS selector</p> <h3 id="pa
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="active sidebar-link">Undo Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undomanager"class="sidebar-link">UndoManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#removeall"class="sidebar-link">removeAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#start"class="sidebar-link">start</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#stop"class="sidebar-link">stop</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undo"class="sidebar-link">undo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undoall"class="sidebar-link">undoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redo"class="sidebar-link">redo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redoall"class="sidebar-link">redoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasundo"class="sidebar-link">hasUndo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasredo"class="sidebar-link">hasRedo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getstack"class="sidebar-link">getStack</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getstackgroup"class="sidebar-link">getStackGroup</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#clear"class="sidebar-link">clear</a></li></ul></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="undomanager"><ahref="#undomanager"class="header-anchor">#</a> UndoManager</h2><p>This module allows to manage the stack of changes applied in canvas.
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"aria-current="page"class="active sidebar-link">Undo Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undomanager"class="sidebar-link">UndoManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#removeall"class="sidebar-link">removeAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#start"class="sidebar-link">start</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#stop"class="sidebar-link">stop</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undo"class="sidebar-link">undo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undoall"class="sidebar-link">undoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redo"class="sidebar-link">redo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redoall"class="sidebar-link">redoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasundo"class="sidebar-link">hasUndo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasredo"class="sidebar-link">hasRedo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getstack"class="sidebar-link">getStack</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getstackgroup"class="sidebar-link">getStackGroup</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#clear"class="sidebar-link">clear</a></li></ul></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="undomanager"><ahref="#undomanager"class="header-anchor">#</a> UndoManager</h2><p>This module allows to manage the stack of changes applied in canvas.
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([[16],{384:function(t,e,s){"use strict";s.r(e);varn=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){returnn[Math.floor(Math.random()*n.length)]}}},i=s(33),h=Object(i.a)(o,(function(){vart=this.$createElement,e=this._self._c||t;returne("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{409:function(t,e,s){"use strict";s.r(e);varn=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){returnn[Math.floor(Math.random()*n.length)]}}},i=s(42),h=Object(i.a)(o,(function(){vart=this.$createElement,e=this._self._c||t;returne("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{410:function(t,e,s){"use strict";s.r(e);vara=s(33),o=Object(a.a)({},(function(){vart=this.$createElement,e=this._self._c||t;returne("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"api-reference"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),e("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),e("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{435:function(t,e,s){"use strict";s.r(e);vara=s(42),o=Object(a.a)({},(function(){vart=this.$createElement,e=this._self._c||t;returne("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"api-reference"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),e("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),e("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
Artur Arseniev
6 years ago