<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="theme-default-content"><h1>404</h1><blockquote>Looks like we've got some broken links.</blockquote><ahref="/docs/"class="router-link-active">
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"aria-current="page"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/I18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Traits</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></section></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="getting-started"><ahref="#getting-started"class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>path/to/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"aria-current="page"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/I18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Traits</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Modal.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></section></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="getting-started"><ahref="#getting-started"class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>path/to/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/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/block.html"class="sidebar-link"> Block</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"aria-current="page"class="active sidebar-link"> Component</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#component"class="sidebar-link">Component</a></li></ul></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/pages.html"class="sidebar-link">Pages</a></li><li><ahref="/docs/api/page.html"class="sidebar-link"> Page</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/device.html"class="sidebar-link"> Device</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/css_rule.html"class="sidebar-link"> CssRule</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><li><ahref="/docs/api/parser.html"class="sidebar-link">Parser</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="component"><ahref="#component"class="header-anchor">#</a> Component</h2><p><strong>Extends Model.extend(Styleable)</strong></p><p>The Component object represents a single node of our template structure, so when you update its properties the changes are
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/asset.html"class="sidebar-link"> Asset</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/block.html"class="sidebar-link"> Block</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"aria-current="page"class="active sidebar-link"> Component</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#component"class="sidebar-link">Component</a></li></ul></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/pages.html"class="sidebar-link">Pages</a></li><li><ahref="/docs/api/page.html"class="sidebar-link"> Page</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/device.html"class="sidebar-link"> Device</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/css_rule.html"class="sidebar-link"> CssRule</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><li><ahref="/docs/api/parser.html"class="sidebar-link">Parser</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="component"><ahref="#component"class="header-anchor">#</a> Component</h2><p><strong>Extends Model.extend(Styleable)</strong></p><p>The Component object represents a single node of our template structure, so when you update its properties the changes are
immediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all
immediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all
the tree of nodes).
the tree of nodes).
An example on how to update properties:</p><divclass="language-js extra-class"><preclass="language-js"><code>component<spanclass="token punctuation">.</span><spanclass="token function">set</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
An example on how to update properties:</p><divclass="language-js extra-class"><preclass="language-js"><code>component<spanclass="token punctuation">.</span><spanclass="token function">set</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
@ -169,6 +169,6 @@ This method is used in Components.js just after the parsing</p> <h4 id="paramete
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<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
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<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="active sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/block.html"class="sidebar-link"> Block</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/pages.html"class="sidebar-link">Pages</a></li><li><ahref="/docs/api/page.html"class="sidebar-link"> Page</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/device.html"class="sidebar-link"> Device</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/css_rule.html"class="sidebar-link"> CssRule</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><li><ahref="/docs/api/parser.html"class="sidebar-link">Parser</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="api-reference"><ahref="#api-reference"class="header-anchor">#</a> API Reference</h1><p>Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also <ahref="/docs/modules/Plugins.html">create a plugin</a> and make those extensions reusable and available to others.</p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/README.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></div><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">7/9/2018, 1:03:59 AM</span></div></footer><divclass="page-nav"><pclass="inner"><!----><spanclass="next"><ahref="/docs/api/editor.html">
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="active sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/asset.html"class="sidebar-link"> Asset</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/block.html"class="sidebar-link"> Block</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/pages.html"class="sidebar-link">Pages</a></li><li><ahref="/docs/api/page.html"class="sidebar-link"> Page</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/device.html"class="sidebar-link"> Device</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/css_rule.html"class="sidebar-link"> CssRule</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><li><ahref="/docs/api/parser.html"class="sidebar-link">Parser</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="api-reference"><ahref="#api-reference"class="header-anchor">#</a> API Reference</h1><p>Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also <ahref="/docs/modules/Plugins.html">create a plugin</a> and make those extensions reusable and available to others.</p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/README.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></div><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">7/9/2018, 1:03:59 AM</span></div></footer><divclass="page-nav"><pclass="inner"><!----><spanclass="next"><ahref="/docs/api/editor.html">
</code></pre></div><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a><Frame></strong></p><h2id="getmainframe"><ahref="#getmainframe"class="header-anchor">#</a> getMainFrame</h2><p>Get the first frame of the page (identified always as the main one)</p><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">const</span> mainFrame <spanclass="token operator">=</span> page<spanclass="token punctuation">.</span><spanclass="token function">getMainFrame</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a><Frame></strong></p><h2id="getmainframe"><ahref="#getmainframe"class="header-anchor">#</a> getMainFrame</h2><p>Get the first frame of the page (identified always as the main one)</p><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">const</span> mainFrame <spanclass="token operator">=</span> page<spanclass="token punctuation">.</span><spanclass="token function">getMainFrame</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>Frame</strong></p><h2id="getmaincomponent"><ahref="#getmaincomponent"class="header-anchor">#</a> getMainComponent</h2><p>Get the root component (usually is the <code>wrapper</code> component) from the main frame</p><h3id="examples-3"><ahref="#examples-3"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">const</span> rootComponent <spanclass="token operator">=</span> page<spanclass="token punctuation">.</span><spanclass="token function">getMainComponent</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>Frame</strong></p><h2id="getmaincomponent"><ahref="#getmaincomponent"class="header-anchor">#</a> getMainComponent</h2><p>Get the root component (usually is the <code>wrapper</code> component) from the main frame</p><h3id="examples-3"><ahref="#examples-3"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">const</span> rootComponent <spanclass="token operator">=</span> page<spanclass="token punctuation">.</span><spanclass="token function">getMainComponent</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/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/block.html"class="sidebar-link"> Block</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/pages.html"class="sidebar-link">Pages</a></li><li><ahref="/docs/api/page.html"class="sidebar-link"> Page</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/device.html"class="sidebar-link"> Device</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/css_rule.html"class="sidebar-link"> CssRule</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><li><ahref="/docs/api/parser.html"class="sidebar-link">Parser</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="richtexteditor"><ahref="#richtexteditor"class="header-anchor">#</a> RichTextEditor</h2><p>This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the <ahref="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand"target="_blank"rel="noopener noreferrer">HTML Editing APIs<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a>.
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/asset.html"class="sidebar-link"> Asset</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/block.html"class="sidebar-link"> Block</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/pages.html"class="sidebar-link">Pages</a></li><li><ahref="/docs/api/page.html"class="sidebar-link"> Page</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/device.html"class="sidebar-link"> Device</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/css_rule.html"class="sidebar-link"> CssRule</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><li><ahref="/docs/api/parser.html"class="sidebar-link">Parser</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="richtexteditor"><ahref="#richtexteditor"class="header-anchor">#</a> RichTextEditor</h2><p>This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the <ahref="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand"target="_blank"rel="noopener noreferrer">HTML Editing APIs<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a>.
It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/block.html"class="sidebar-link"> Block</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/pages.html"class="sidebar-link">Pages</a></li><li><ahref="/docs/api/page.html"class="sidebar-link"> Page</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/device.html"class="sidebar-link"> Device</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/css_rule.html"class="sidebar-link"> CssRule</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><li><ahref="/docs/api/parser.html"class="sidebar-link">Parser</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="selectormanager"><ahref="#selectormanager"class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"aria-current="page"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/asset.html"class="sidebar-link"> Asset</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/block.html"class="sidebar-link"> Block</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/pages.html"class="sidebar-link">Pages</a></li><li><ahref="/docs/api/page.html"class="sidebar-link"> Page</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/device.html"class="sidebar-link"> Device</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/css_rule.html"class="sidebar-link"> CssRule</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><li><ahref="/docs/api/parser.html"class="sidebar-link">Parser</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="selectormanager"><ahref="#selectormanager"class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
a look at this code:</p><divclass="language-css extra-class"><preclass="language-css"><code><spanclass="token selector">span > #send-btn.btn</span><spanclass="token punctuation">{</span>
a look at this code:</p><divclass="language-css extra-class"><preclass="language-css"><code><spanclass="token selector">span > #send-btn.btn</span><spanclass="token punctuation">{</span>
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([[16],{344:function(e,t,a){},382:function(e,t,a){"use strict";a(344)},427:function(e,t,a){"use strict";a.r(t);a(66),a(27),a(95),a(96);varo={name:"CodeGroup",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.activateCodeTab(e)}},mounted:function(){this.loadTabs()},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e},loadTabs:function(){vare=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){returnBoolean(e.componentOptions)})).map((function(t,a){return""===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=a),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab:function(e){this.codeTabs.forEach((function(e){e.elm&&e.elm.classList.remove("theme-code-block__active")})),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},n=(a(382),a(44)),c=Object(n.a)(o,(function(){vare=this,t=e.$createElement,a=e._self._c||t;returna("ClientOnly",[a("div",{staticClass:"theme-code-group"},[a("div",{staticClass:"theme-code-group__nav"},[a("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(t,o){returna("li",{key:t.title,staticClass:"theme-code-group__li"},[a("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){returne.changeCodeTab(o)}}},[e._v("\n "+e._s(t.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?a("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{343:function(e,t,a){},381:function(e,t,a){"use strict";a(343)},438:function(e,t,a){"use strict";a.r(t);a(66),a(27),a(95),a(96);varo={name:"CodeGroup",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.activateCodeTab(e)}},mounted:function(){this.loadTabs()},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e},loadTabs:function(){vare=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){returnBoolean(e.componentOptions)})).map((function(t,a){return""===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=a),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab:function(e){this.codeTabs.forEach((function(e){e.elm&&e.elm.classList.remove("theme-code-block__active")})),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},n=(a(381),a(44)),c=Object(n.a)(o,(function(){vare=this,t=e.$createElement,a=e._self._c||t;returna("ClientOnly",[a("div",{staticClass:"theme-code-group"},[a("div",{staticClass:"theme-code-group__nav"},[a("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(t,o){returna("li",{key:t.title,staticClass:"theme-code-group__li"},[a("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){returne.changeCodeTab(o)}}},[e._v("\n "+e._s(t.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?a("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{435: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(44),h=Object(i.a)(o,(function(){vart=this.$createElement,e=this._self._c||t;returne("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{428: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(44),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([[21],{455:function(t,e,s){"use strict";s.r(e);vara=s(44),o=Object(a.a)({},(function(){vart=this.$createElement,e=this._self._c||t;returne("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"api-reference"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),e("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),e("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{454:function(t,e,s){"use strict";s.r(e);vara=s(44),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([[23],{460:function(e,t,r){"use strict";r.r(t);varo=r(44),n=Object(o.a)({},(function(){vare=this,t=e.$createElement,r=e._self._c||t;returnr("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[r("h2",{attrs:{id:"block"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#block"}},[e._v("#")]),e._v(" Block")]),e._v(" "),r("h3",{attrs:{id:"properties"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),r("ul",[r("li",[r("code",[e._v("label")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1)]),e._v(" Block label, eg. "),r("code",[e._v("My block")])]),e._v(" "),r("li",[r("code",[e._v("content")]),e._v(" "),r("strong",[e._v("("),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v(" | "),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),r("OutboundLink")],1),e._v(")")]),e._v(" The content of the block. Might be an HTML string or a "),r("RouterLink",{attrs:{to:"/modules/Components.html#component-definition"}},[e._v("Component Defintion")])],1),e._v(" "),r("li",[r("code",[e._v("media")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v("?")]),e._v(" HTML string for the media/icon of the block, eg. "),r("code",[e._v("<svg ...")]),e._v(", "),r("code",[e._v("<img ...")]),e._v(", etc.")]),e._v(" "),r("li",[r("code",[e._v("category")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v("?")]),e._v(" Block category")]),e._v(" "),r("li",[r("code",[e._v("activate")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),r("OutboundLink")],1),e._v("?")]),e._v(" If true, triggers an the "),r("code",[e._v("active")]),e._v(" event on dropped component")]),e._v(" "),r("li",[r("code",[e._v("select")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),r("OutboundLink")],1),e._v("?")]),e._v(" If true, the dropped component will be selected")]),e._v(" "),r("li",[r("code",[e._v("resetId")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),r("OutboundLink")],1),e._v("?")]),e._v(" If true, all IDs of dropped components and their styles will be changed")]),e._v(" "),r("li",[r("code",[e._v("disable")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),r("OutboundLink")],1),e._v("?")]),e._v(" Disable the block from being interacted")]),e._v(" "),r("li",[r("code",[e._v("onClick")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),r("OutboundLink")],1),e._v("?")]),e._v(" Custom behavior on click, eg. "),r("code",[e._v("(block, editor) => editor.getWrapper().append(block.get('content'))")])]),e._v(" "),r("li",[r("code",[e._v("attributes")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),r("OutboundLink")],1),e._v("?")]),e._v(" Block attributes to apply in the view element")])])])}),[],!1,null,null,null);t.default=n.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{445:function(e,t,r){"use strict";r.r(t);varo=r(44),n=Object(o.a)({},(function(){vare=this,t=e.$createElement,r=e._self._c||t;returnr("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[r("h2",{attrs:{id:"block"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#block"}},[e._v("#")]),e._v(" Block")]),e._v(" "),r("h3",{attrs:{id:"properties"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),r("ul",[r("li",[r("code",[e._v("label")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1)]),e._v(" Block label, eg. "),r("code",[e._v("My block")])]),e._v(" "),r("li",[r("code",[e._v("content")]),e._v(" "),r("strong",[e._v("("),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v(" | "),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),r("OutboundLink")],1),e._v(")")]),e._v(" The content of the block. Might be an HTML string or a "),r("RouterLink",{attrs:{to:"/modules/Components.html#component-definition"}},[e._v("Component Defintion")])],1),e._v(" "),r("li",[r("code",[e._v("media")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v("?")]),e._v(" HTML string for the media/icon of the block, eg. "),r("code",[e._v("<svg ...")]),e._v(", "),r("code",[e._v("<img ...")]),e._v(", etc.")]),e._v(" "),r("li",[r("code",[e._v("category")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1),e._v("?")]),e._v(" Block category")]),e._v(" "),r("li",[r("code",[e._v("activate")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),r("OutboundLink")],1),e._v("?")]),e._v(" If true, triggers an the "),r("code",[e._v("active")]),e._v(" event on dropped component")]),e._v(" "),r("li",[r("code",[e._v("select")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),r("OutboundLink")],1),e._v("?")]),e._v(" If true, the dropped component will be selected")]),e._v(" "),r("li",[r("code",[e._v("resetId")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),r("OutboundLink")],1),e._v("?")]),e._v(" If true, all IDs of dropped components and their styles will be changed")]),e._v(" "),r("li",[r("code",[e._v("disable")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),r("OutboundLink")],1),e._v("?")]),e._v(" Disable the block from being interacted")]),e._v(" "),r("li",[r("code",[e._v("onClick")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),r("OutboundLink")],1),e._v("?")]),e._v(" Custom behavior on click, eg. "),r("code",[e._v("(block, editor) => editor.getWrapper().append(block.get('content'))")])]),e._v(" "),r("li",[r("code",[e._v("attributes")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),r("OutboundLink")],1),e._v("?")]),e._v(" Block attributes to apply in the view element")])])])}),[],!1,null,null,null);t.default=n.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{481:function(e,r,t){"use strict";t.r(r);varo=t(44),i=Object(o.a)({},(function(){vare=this,r=e.$createElement,t=e._self._c||r;returnt("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"device"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#device"}},[e._v("#")]),e._v(" Device")]),e._v(" "),t("h3",{attrs:{id:"properties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),t("ul",[t("li",[t("code",[e._v("name")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Device type, eg. "),t("code",[e._v("Mobile")])]),e._v(" "),t("li",[t("code",[e._v("width")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Width to set for the editor iframe, eg. '900px'")]),e._v(" "),t("li",[t("code",[e._v("height")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Height to set for the editor iframe, eg. '600px'")]),e._v(" "),t("li",[t("code",[e._v("widthMedia")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" The width which will be used in media queries, If empty the width will be used")]),e._v(" "),t("li",[t("code",[e._v("priority")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),t("OutboundLink")],1),e._v("?")]),e._v(" Setup the order of media queries")])])])}),[],!1,null,null,null);r.default=i.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{455:function(e,r,t){"use strict";t.r(r);varo=t(44),i=Object(o.a)({},(function(){vare=this,r=e.$createElement,t=e._self._c||r;returnt("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"device"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#device"}},[e._v("#")]),e._v(" Device")]),e._v(" "),t("h3",{attrs:{id:"properties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),t("ul",[t("li",[t("code",[e._v("name")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Device type, eg. "),t("code",[e._v("Mobile")])]),e._v(" "),t("li",[t("code",[e._v("width")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Width to set for the editor iframe, eg. '900px'")]),e._v(" "),t("li",[t("code",[e._v("height")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Height to set for the editor iframe, eg. '600px'")]),e._v(" "),t("li",[t("code",[e._v("widthMedia")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" The width which will be used in media queries, If empty the width will be used")]),e._v(" "),t("li",[t("code",[e._v("priority")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),t("OutboundLink")],1),e._v("?")]),e._v(" Setup the order of media queries")])])])}),[],!1,null,null,null);r.default=i.exports}}]);
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"aria-current="page"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/I18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Traits</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></section></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading open"><span>Guides</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"aria-current="page"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><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="replace-the-built-in-rich-text-editor"><ahref="#replace-the-built-in-rich-text-editor"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"class="header-anchor">#</a> Interface</h2><h3id="enable"><ahref="#enable"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>
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"aria-current="page"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/I18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Traits</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Modal.html"class="sidebar-link">Modal</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 open"><span>Guides</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"aria-current="page"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><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="replace-the-built-in-rich-text-editor"><ahref="#replace-the-built-in-rich-text-editor"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"class="header-anchor">#</a> Interface</h2><h3id="enable"><ahref="#enable"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>
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"aria-current="page"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/modules/Assets.html"aria-current="page"class="active sidebar-link">Assets</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">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="asset-manager"><ahref="#asset-manager"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. The Asset Manager is 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"class="header-anchor">#</a> Configuration</h2><p>To change default configurations you'll 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>
<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"aria-current="page"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/modules/Assets.html"aria-current="page"class="active sidebar-link">Assets</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#uploading-assets"class="sidebar-link">Uploading assets</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#programmatic-usage"class="sidebar-link">Programmatic usage</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#events"class="sidebar-link">Events</a></li></ul></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/Modal.html"class="sidebar-link">Modal</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="asset-manager"><ahref="#asset-manager"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. The Asset Manager is 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="#uploading-assets">Uploading assets</a><ul><li><ahref="#listeners">Listeners</a></li><li><ahref="#response">Response</a></li></ul></li><li><ahref="#programmatic-usage">Programmatic usage</a><ul><li><ahref="#custom-select-logic">Custom select logic</a></li></ul></li><li><ahref="#customization">Customization</a></li><li><ahref="#events">Events</a></li></ul></div><p></p><h2id="configuration"><ahref="#configuration"class="header-anchor">#</a> Configuration</h2><p>To change default configurations you'd need to pass the<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>
</code></pre></div><p>You can update most of them later by using <code>getConfig</code> inside of the module</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> amConfig <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>AssetManager<spanclass="token punctuation">.</span><spanclass="token function">getConfig</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>You can update most of them later by using <code>getConfig</code> inside of the module</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> amConfig <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>AssetManager<spanclass="token punctuation">.</span><spanclass="token function">getConfig</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Below is a list of currently available options</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Default assets</span>
</code></pre></div><p>Check the full list of available options here: <ahref="https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js"target="_blank"rel="noopener noreferrer">Asset Manager Config<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></p><h2id="initialization"><ahref="#initialization"class="header-anchor">#</a> Initialization</h2><p>The Asset Manager is ready to work by default, so pass few URLs to see them loaded</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>
<spanclass="token comment">// Text on upload input</span>
uploadText<spanclass="token operator">:</span><spanclass="token string">'Drop files here or click to upload'</span><spanclass="token punctuation">,</span>
<spanclass="token comment">// Label for the add button</span>
</code></pre></div><p>Sometimes the code gets ahead of the docs, therefore we'd suggest to keep an eye at the current state of configurations by checking the dedicated source file <ahref="https://github.com/artf/grapesjs/blob/dev/src/asset_manager/config/config.js"target="_blank"rel="noopener noreferrer">Asset Manager Config<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></p><h2id="initialization"><ahref="#initialization"class="header-anchor">#</a> Initialization</h2><p>The Asset Manager is ready to work by default, so pass few URLs to see them loaded</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>If you want a complete list of available properties check out the source <ahref="https://github.com/artf/grapesjs/blob/dev/src/asset_manager/model/AssetImage.js"target="_blank"rel="noopener noreferrer">AssetImage Model<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></p><p>The built-in Asset Manager modal is implemented and is showing up when requested. By default, you can make it appear by dragging Image Components in canvas, double clicking on images and all other stuff related to images (eg. CSS styling)</p><imgsrc="/docs/assets-builtin-modal.png"><p>Making the modal appear is registered with a command, so you can make it appear with this</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// This command shows only assets with `image` type</span>
</code></pre></div><p>If you want a complete list of available properties check out the source <ahref="https://github.com/artf/grapesjs/blob/dev/src/asset_manager/model/AssetImage.js"target="_blank"rel="noopener noreferrer">AssetImage Model<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></a></p><p>The built-in Asset Manager modal is implemented and is showing up when requested. By default, you can make it appear by dragging Image Components in canvas, double clicking on images and all other stuff related to images (eg. CSS styling)</p><imgsrc="/docs/assets-builtin-modal.png"><h2id="uploading-assets"><ahref="#uploading-assets"class="header-anchor">#</a> Uploading assets</h2><p>The default Asset Manager includes also an easy to use, drag-and-drop uploader with a few UI helpers. The default uploader is already visible when you open the Asset Manager.</p><imgsrc="/docs/assets-uploader.png"><p>You can click on the uploader to select your files or just drag them directly from your computer to trigger the uploader. Obviously, before it will work you have to setup your server to receive your assets and specify the upload endpoint in your configuration</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>Worth nothing that by doing this you can't do much with assets (if you double click on them nothing happens) and this is because you've not indicated any target. Try just to select an image in your canvas and run this in console (you should first make the editor globally available <code>window.editor = editor;</code> in your script)</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span><spanclass="token function">runCommand</span><spanclass="token punctuation">(</span><spanclass="token string">'open-assets'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Now you should be able to change the image of the component.</p><h2id="customization"><ahref="#customization"class="header-anchor">#</a> Customization</h2><p>If you want to customize the Asset Manager after the initialization you have to use its <ahref="API-Asset-Manager">APIs</a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Get the Asset Manager module first</span>
<spanclass="token keyword">const</span> am <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>AssetManager<spanclass="token punctuation">;</span>
</code></pre></div><p>First of all, it's worth nothing that Asset Manager keeps 2 collections of assets:</p><ul><li><strong>global</strong> - which is just the one with all available assets, you can get it with <code>am.getAll()</code></li><li><strong>visible</strong> - this is the collection which is currently rendered by the Asset Manager, you get it with <code>am.getAllVisible()</code></li></ul><p>This allows you to decide which assets to show and when. Let's say we'd like to have a category switcher, first of all you gonna add to the <strong>global</strong> collection all your assets (which you may already defined at init by <code>config.assetManager.assets = [...]</code>)</p><divclass="language-js extra-class"><preclass="language-js"><code>am<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token punctuation">[</span>
<spanclass="token punctuation">{</span>
<spanclass="token comment">// You can pass any custom property you want</span>
</code></pre></div><p>Now if you call the <code>render()</code>, without an argument, you will see all the assets rendered</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// without any argument</span>
</code></pre></div><p>Ok, now let's show only assets form the first category</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> assets <spanclass="token operator">=</span> am<spanclass="token punctuation">.</span><spanclass="token function">getAll</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
am<spanclass="token punctuation">.</span><spanclass="token function">getAll</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">.</span>length <spanclass="token comment">// Still have 3 assets</span>
am<spanclass="token punctuation">.</span><spanclass="token function">getAllVisible</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">.</span>length <spanclass="token comment">// but only 2 are shown</span>
</code></pre></div><p>You can also mix arrays of assets</p><divclass="language-js extra-class"><preclass="language-js"><code>am<spanclass="token punctuation">.</span><spanclass="token function">render</span><spanclass="token punctuation">(</span><spanclass="token punctuation">[</span><spanclass="token operator">...</span>assets1<spanclass="token punctuation">,</span><spanclass="token operator">...</span>assets2<spanclass="token punctuation">,</span><spanclass="token operator">...</span>assets3<spanclass="token punctuation">]</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>If you want to customize the asset manager container you can get its <code>HTMLElement</code></p><divclass="language-js extra-class"><preclass="language-js"><code>am<spanclass="token punctuation">.</span><spanclass="token function">getContainer</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">.</span><spanclass="token function">insertAdjacentHTML</span><spanclass="token punctuation">(</span><spanclass="token string">'afterbegin'</span><spanclass="token punctuation">,</span><spanclass="token string">'<div><button type="button">Click</button></div>'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>For more APIs methods check out the <ahref="API-Asset-Manager">API Reference</a></p><h3id="define-new-asset-type"><ahref="#define-new-asset-type"class="header-anchor">#</a> Define new Asset type</h3><p>Generally speaking, images aren't the only asset you'll use, it could be a <code>video</code>, <code>svg-icon</code>, or any other kind of <code>document</code>. Each type of asset is applied in our templates/pages differently. If you need to change the image of the Component all you need is another <code>url</code> in <code>src</code> attribute. However In case of a <code>svg-icon</code>, its not the same, you might want to replace the element with a new <code><svg></code> content. Besides this you also have to deal with the presentation/preview of the asset inside the panel/modal. For example, showing a thumbnail for big images or the possibility to preview videos.</p><p>Defining a new asset it means we have to push on top of the 'Stack of Types' a new layer. This stack is iterated over by the editor at any addition of the asset and tries to associate the correct type.</p><divclass="language-js extra-class"><preclass="language-js"><code>am<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'https://.../image.png'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<spanclass="token comment">// string, url, ends with '.png' -> it's an 'image' type</span>
<spanclass="token comment">// an object, has 'video' type key -> 'video' type</span>
</code></pre></div><p>It's up to you tell the editor how to recognize your type and for this purpose you should to use <code>isType()</code> method.
Let's see now an example of how we'd start to defining a type like <code>svg-icon</code></p><divclass="language-js extra-class"><preclass="language-js"><code>am<spanclass="token punctuation">.</span><spanclass="token function">addType</span><spanclass="token punctuation">(</span><spanclass="token string">'svg-icon'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
<spanclass="token comment">// `value` is for example the argument passed in `am.add(VALUE);`</span>
</code></pre></div><p>With this snippet you can already add SVGs, the asset manager will assign the appropriate type.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Add some random SVG</span>
</code></pre></div><p>You should see something like this</p><imgsrc="/docs/assets-empty-view.png"><p>The SVG asset is not rendered correctly and this is because we haven't yet configured its view</p><divclass="language-js extra-class"><preclass="language-js"><code>am<spanclass="token punctuation">.</span><spanclass="token function">addType</span><spanclass="token punctuation">(</span><spanclass="token string">'svg-icon'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>This is the result</p><imgsrc="/docs/assets-svg-view.png"><p>Now we have to deal with how to assign our <code>svgContent</code> to the selected element</p><divclass="language-js extra-class"><preclass="language-js"><code>am<spanclass="token punctuation">.</span><spanclass="token function">addType</span><spanclass="token punctuation">(</span><spanclass="token string">'svg-icon'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Our custom <code>svg-icon</code> asset is ready to use. You can also add a <code>model</code> to the <code>addType</code> definition to group the business logic of your asset, but usually it's optional.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Just an example of model use</span>
</code></pre></div><h3id="extend-asset-types"><ahref="#extend-asset-types"class="header-anchor">#</a> Extend Asset Types</h3><p>Extending asset types is basically the same as adding them, you can choose what type to extend and how.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// svgIconType will contain the definition (model, view, isType)</span>
</code></pre></div><p>You can also extend the already defined types (to be sure to load assets with the old type extended create a plugin for your definitions)</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Extend the original `image` and add a confirm dialog before removing it</span>
</code></pre></div><h2id="uploading-assets"><ahref="#uploading-assets"class="header-anchor">#</a> Uploading assets</h2><p>Asset Manager includes an easy to use, drag-and-drop uploader with a few UI helpers. The default uploader is already visible when you open the Asset Manager.</p><imgsrc="/docs/assets-uploader.png"><p>You can click on the uploader to select your files or just drag them directly from your computer to trigger the uploader. Obviously, before it will work you have to setup your server to receive your assets and specify the upload endpoint in your configuration</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">let</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><h3id="listeners"><ahref="#listeners"class="header-anchor">#</a> Listeners</h3><p>If you want to execute an action before/after the uploading process (eg. loading animation) or even on response, you can make use of these listeners</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// The upload is started</span>
</code></pre></div><h3id="listeners"><ahref="#listeners"class="header-anchor">#</a> Listeners</h3><p>If you want to execute an action before/after the uploading process (eg. loading animation) or even on response, you can make use of these listeners</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// The upload is started</span>
</code></pre></div><h3id="response"><ahref="#response"class="header-anchor">#</a> Response</h3><p>When the uploading is over, by default (via config parameter <code>autoAdd: 1</code>), the editor expects to receive a JSON blob of uploaded assets in a <code>data</code> key as a response and tries to add them to the main collection. The JSON might look like this:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token punctuation">{</span>
</code></pre></div><h3id="response"><ahref="#response"class="header-anchor">#</a> Response</h3><p>When the uploading is over, by default (via config parameter <code>autoAdd: 1</code>), the editor expects to receive a JSON of uploaded assets in a <code>data</code> key as a response and tries to add them to the main collection. The JSON might look like this:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token punctuation">{</span>
</code></pre></div><h3id="setup-dropzone"><ahref="#setup-dropzone"class="header-anchor">#</a> Setup Dropzone</h3><p>There is another helper which improves the uploading of assets: A full-width editor dropzone.</p><imgsrc="/docs/assets-full-dropzone.gif"><p>All you have to do is to activate it and possibly set a custom content (you might also want to hide the default uploader)</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><h2id="programmatic-usage"><ahref="#programmatic-usage"class="header-anchor">#</a> Programmatic usage</h2><p>If you need to manage your assets programmatically you have to use its <ahref="/docs/api/assets.html">APIs</a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Get the Asset Manager module first</span>
<spanclass="token operator">...</span>
<spanclass="token keyword">const</span> am <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>AssetManager<spanclass="token punctuation">;</span>
</code></pre></div><p>First of all, it's worth nothing that Asset Manager keeps 2 collections of assets:</p><ul><li><strong>global</strong> - which is just the one with all available assets, you can get it with <code>am.getAll()</code></li><li><strong>visible</strong> - this is the collection which is currently rendered by the Asset Manager, you get it with <code>am.getAllVisible()</code></li></ul><p>This allows you to decide which assets to show and when. Let's say we'd like to have a category switcher, first of all you gonna add to the <strong>global</strong> collection all your assets (which you may already defined at init by <code>config.assetManager.assets = [...]</code>)</p><divclass="language-js extra-class"><preclass="language-js"><code>am<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token punctuation">[</span>
<spanclass="token comment">// You can pass any custom property you want</span>
dropzoneContent<spanclass="token operator">:</span><spanclass="token string">'<div class="dropzone-inner">Drop here your assets</div>'</span>
</code></pre></div><p>Now if you call the <code>render()</code>, without an argument, you will see all the assets rendered</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// without any argument</span>
</code></pre></div><p>Ok, now let's show only assets form the first category</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> assets <spanclass="token operator">=</span> am<spanclass="token punctuation">.</span><spanclass="token function">getAll</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
am<spanclass="token punctuation">.</span><spanclass="token function">getAll</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">.</span>length <spanclass="token comment">// Still have 3 assets</span>
am<spanclass="token punctuation">.</span><spanclass="token function">getAllVisible</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">.</span>length <spanclass="token comment">// but only 2 are shown</span>
</code></pre></div><p>You can also mix arrays of assets</p><divclass="language-js extra-class"><preclass="language-js"><code>am<spanclass="token punctuation">.</span><spanclass="token function">render</span><spanclass="token punctuation">(</span><spanclass="token punctuation">[</span><spanclass="token operator">...</span>assets1<spanclass="token punctuation">,</span><spanclass="token operator">...</span>assets2<spanclass="token punctuation">,</span><spanclass="token operator">...</span>assets3<spanclass="token punctuation">]</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>In case you want to update or remove an asset, you can make use of this methods</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Get the asset via its `src`</span>
am<spanclass="token punctuation">.</span><spanclass="token function">remove</span><spanclass="token punctuation">(</span>asset<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span><spanclass="token comment">// or via src, am.remove('http://.../new-img.jpg');</span>
</code></pre></div><p>For more APIs methods check out the <ahref="API-Asset-Manager">API Reference</a></p><h3id="custom-select-logic"><ahref="#custom-select-logic"class="header-anchor">#</a> Custom select logic</h3><divclass="custom-block warning"><pclass="custom-block-title">WARNING</p><p>This section is referring to GrapesJS v0.17.26 or higher</p></div><p>You can open the Asset Manager with your own select logic.</p><divclass="language-js extra-class"><preclass="language-js"><code>am<spanclass="token punctuation">.</span><spanclass="token function">open</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
types<spanclass="token operator">:</span><spanclass="token punctuation">[</span><spanclass="token string">'image'</span><spanclass="token punctuation">]</span><spanclass="token punctuation">,</span><spanclass="token comment">// This is the default option</span>
<spanclass="token comment">// Without select, nothing will happen on asset selection</span>
</code></pre></div><h2id="customization"><ahref="#customization"class="header-anchor">#</a> Customization</h2><p>The default Asset Manager UI is great for simple things, but except the possibility to tweak some CSS style, adding more complex things like a search input, filters, etc. requires a replace of the defualt UI.</p><p>All you have to do is to indicate the editor your intent to use a custom UI and then subscribe to the <code>asset:custom</code> event that will give you all the information on any requested change.</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>Here an example of using custom Asset Manager with a Vue component.</p><iframewidth="100%"height="500"src="//jsfiddle.net/artur_arseniev/wbj4tmqk/embedded/js,html,css,result/dark/?menuColor=fff&fontColor=333&accentColor=e67891"allowfullscreen="allowfullscreen"frameborder="0"></iframe><p>The example above is the right way if you need to replace the default UI, but as you might notice we append the mounted element to the container <code>props.container.appendChild(this.$el);</code>.
This is required as the Asset Manager, by default, is placed in the <ahref="/docs/modules/Modal.html">Modal</a>.</p><p>How to approach the case when your Asset Manager is a completely independent/external module (eg. should be showed in its own custom modal)? Not a problem, you can bind the Asset Manager state via <code>assetManager.custom.open</code>.</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><h2id="events"><ahref="#events"class="header-anchor">#</a> Events</h2><p>Currently available events you can listen to</p><ul><li><code>asset:add</code> - New asset added</li><li><code>asset:remove</code> - Asset removed</li><li><code>asset:upload:start</code> - Before the upload is started</li><li><code>asset:upload:end</code> - After the upload is ended</li><li><code>asset:upload:error</code> - On any error in upload, passes the error as an argument</li><li><code>asset:upload:response</code> - On upload response, passes the result as an argument</li></ul></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/modules/Assets.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></div><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">7/1/2021, 4:04:40 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
</code></pre></div><p>It's important to declare also the <code>close</code> function, the editor should be able to close the Asset Manager via <code>am.close()</code>.</p><h2id="events"><ahref="#events"class="header-anchor">#</a> Events</h2><p>For a complete list of available events, you can check it <ahref="/docs/api/assets.html#available-events">here</a>.</p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/modules/Assets.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><spanclass="sr-only">(opens new window)</span></span></div><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">9/18/2021, 10:29:32 AM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
Artur Arseniev
5 years ago