<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>How did we get here?</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>How did we get here?</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="active sidebar-link">Style Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#stylemanager"class="sidebar-link">StyleManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addsector"class="sidebar-link">addSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getsector"class="sidebar-link">getSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#removesector"class="sidebar-link">removeSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getsectors"class="sidebar-link">getSectors</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addproperty"class="sidebar-link">addProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getproperty"class="sidebar-link">getProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#removeproperty"class="sidebar-link">removeProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getproperties"class="sidebar-link">getProperties</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getmodeltostyle"class="sidebar-link">getModelToStyle</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addtype"class="sidebar-link">addType</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#gettype"class="sidebar-link">getType</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#gettypes"class="sidebar-link">getTypes</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#createtype"class="sidebar-link">createType</a></li></ul></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></div><divclass="page"><divclass="content"><h2id="stylemanager"><ahref="#stylemanager"aria-hidden="true"class="header-anchor">#</a> StyleManager</h2><p>With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="active sidebar-link">Style Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#stylemanager"class="sidebar-link">StyleManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addsector"class="sidebar-link">addSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getsector"class="sidebar-link">getSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#removesector"class="sidebar-link">removeSector</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getsectors"class="sidebar-link">getSectors</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addproperty"class="sidebar-link">addProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getproperty"class="sidebar-link">getProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#removeproperty"class="sidebar-link">removeProperty</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getproperties"class="sidebar-link">getProperties</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#getmodeltostyle"class="sidebar-link">getModelToStyle</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#addtype"class="sidebar-link">addType</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#gettype"class="sidebar-link">getType</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#gettypes"class="sidebar-link">getTypes</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#createtype"class="sidebar-link">createType</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/style_manager.html#settarget"class="sidebar-link">setTarget</a></li></ul></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></div><divclass="page"><divclass="content"><h2id="stylemanager"><ahref="#stylemanager"aria-hidden="true"class="header-anchor">#</a> StyleManager</h2><p>With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Returns <strong>PropertyView</strong></p><h2id="settarget"><ahref="#settarget"aria-hidden="true"class="header-anchor">#</a> setTarget</h2><p>Select different target for the Style Manager.
It could be a Component, CSSRule, or a string of any CSS selector</p><h3id="parameters-12"><ahref="#parameters-12"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>target</code><strong>(Component | CSSRule | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</strong></li><li><code>opts</code></li></ul><p>Returns <strong>Styleable</strong> A Component or CSSRule</p></div><divclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/style_manager.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">7/8/2018, 11:17:15 PM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="active sidebar-link">Getting Started</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#import-the-library"class="sidebar-link">Import the library</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#start-from-the-canvas"class="sidebar-link">Start from the canvas</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#add-blocks"class="sidebar-link">Add Blocks</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#define-components"class="sidebar-link">Define Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#panels-buttons"class="sidebar-link">Panels & Buttons</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#layers"class="sidebar-link">Layers</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#style-manager"class="sidebar-link">Style Manager</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#traits"class="sidebar-link">Traits</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#responsive-templates"class="sidebar-link">Responsive templates</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#store-load-data"class="sidebar-link">Store & load data</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#theming"class="sidebar-link">Theming</a></li></ul></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="getting-started"><ahref="#getting-started"aria-hidden="true"class="header-anchor">#</a> Getting Started</h1><p>This guide is a step-by-step introduction for everyone who wants to start creating its own builder with GrapesJS. This is not a complete guide of all functionalities but just a concise overview of most common modules.
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="active sidebar-link">Getting Started</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#import-the-library"class="sidebar-link">Import the library</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#start-from-the-canvas"class="sidebar-link">Start from the canvas</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#add-blocks"class="sidebar-link">Add Blocks</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#define-components"class="sidebar-link">Define Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#panels-buttons"class="sidebar-link">Panels & Buttons</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#layers"class="sidebar-link">Layers</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#style-manager"class="sidebar-link">Style Manager</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#traits"class="sidebar-link">Traits</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#responsive-templates"class="sidebar-link">Responsive templates</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#store-load-data"class="sidebar-link">Store & load data</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#theming"class="sidebar-link">Theming</a></li></ul></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="getting-started"><ahref="#getting-started"aria-hidden="true"class="header-anchor">#</a> Getting Started</h1><p>This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the <ahref="#final-result">final result</a></p><h2id="import-the-library"><ahref="#import-the-library"aria-hidden="true"class="header-anchor">#</a> Import the library</h2><p>Before you start using GrapesJS, you'll have to import it. Let's import the latest version</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>//unpkg.com/grapesjs/dist/css/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
Let's see how to create a completely customized page builder from scratch. The last demo of this page represents the <ahref="#final-result">final result</a></p><h2id="import-the-library"><ahref="#import-the-library"aria-hidden="true"class="header-anchor">#</a> Import the library</h2><p>Before start using GrapesJS you have to import it inside your project, so let's import its latest version</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>//unpkg.com/grapesjs/dist/css/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</code></pre></div><p>or if you're in node environment</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">import</span><spanclass="token string">'grapesjs/dist/css/grapes.min.css'</span><spanclass="token punctuation">;</span>
</code></pre></div><p>or if you're in a Node environment</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">import</span><spanclass="token string">'grapesjs/dist/css/grapes.min.css'</span><spanclass="token punctuation">;</span>
</code></pre></div><h2id="start-from-the-canvas"><ahref="#start-from-the-canvas"aria-hidden="true"class="header-anchor">#</a> Start from the canvas</h2><p>The first step is to define the interface of our editor and for this purpose we gonna start from basic HTML layouts.
</code></pre></div><h2id="start-from-the-canvas"><ahref="#start-from-the-canvas"aria-hidden="true"class="header-anchor">#</a> Start from the canvas</h2><p>The first step is to define the interface of our editor. For this purpose we gonna start with basic HTML layouts. Finding a common structure for the UI of any project is not an easy task. That's why GrapesJS prefers to keep this process as simple as possible. We provide a few helpers, but let the user define the interface. This guarantees maximum flexibility.
Finding a common structure for the UI of any project is not an easy task that's why GrapesJS prefers to keep this process as simple as possible, by providing just few helpers but letting the user define the whole interface, this guarantees maximum flexibility.
The main part of the GrapesJS editor is the canvas, this is where you create the structure of your templates and you can't miss it. Let's try to initiate the editor with the canvas and no panels.</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">id</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>gjs<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
The main part of the GrapesJS editor is the canvas, this is where you gonna create the whole structure of your templates and you definitely can't miss it. Let's try to initiate the editor with just the canvas and no panels.</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">id</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>gjs<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</code></pre></div><divclass="demo-container"data-v-b3715568><divid="gjs"><h1>Hello World Component!</h1></div></div><p>With just the canvas you're already able to move, copy and delete components from the structure (when you select components in the canvas, the toolbar is shown). For now we just see the example template taken from the container. Let's see now how can we create and drag custom blocks into our canvas.</p><h2id="add-blocks"><ahref="#add-blocks"aria-hidden="true"class="header-anchor">#</a> Add Blocks</h2><p>The block in GrapesJS is just a reusable piece of HTML that you can drop in the canvas. A block can be an image, a button, or an entire section with videos, forms and iframes. Let's start from creating another container and append inside it few basic blocks which we can later use to build more complex structures.</p><divclass="language-html extra-class"><divclass="highlight-lines"><br><br><br><divclass="highlighted"></div><br></div><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">id</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>gjs<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</code></pre></div><divclass="demo-container"data-v-b3715568><divid="gjs"><h1>Hello World Component!</h1></div></div><p>With just the canvas you're already able to move, copy and delete components from the structure. For now, we see the example template taken from the container. Next let's look at how to create and drag custom blocks into our canvas.</p><h2id="add-blocks"><ahref="#add-blocks"aria-hidden="true"class="header-anchor">#</a> Add Blocks</h2><p>The block in GrapesJS is just a reusable piece of HTML that you can drop in the canvas. A block can be an image, a button, or an entire section with videos, forms and iframes. Let's start by creating another container and append a few basic blocks inside of it. Later we can use this technique to build more complex structures.</p><divclass="language-html extra-class"><divclass="highlight-lines"><br><br><br><divclass="highlighted"></div><br></div><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">id</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>gjs<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="gjs2"class="gjs"><h1>Hello World Component!</h1></div><divid="blocks2"></div></div></div><p>As you see we add our blocks via the initial configuration, which is ok, but obviously there might be the case you would like to add them dynamically, in this case you have to use the <ahref="/docs/api/block_manager.html">Block Manager API</a></p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'my-block-id'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="gjs2"class="gjs"><h1>Hello World Component!</h1></div><divid="blocks2"></div></div></div><p>As you can see we add our blocks via the initial configuration. Obviously there might be a case in which you would like to add them dynamically, in this case you have to use the <ahref="/docs/api/block_manager.html">Block Manager API</a></p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'my-block-id'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><divclass="tip custom-block"><pclass="custom-block-title">TIP</p><p>If you want to get more about blocks we suggest to read its dedicated page: <ahref="/docs/modules/Blocks.html">Block Manager Module</a></p></div><h2id="define-components"><ahref="#define-components"aria-hidden="true"class="header-anchor">#</a> Define Components</h2><p>Technically, once you drop your HTML block inside the canvas each element of the content is transformed in GrapesJS Component, which is an object containing informations about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected in the View, so, for example, if you add a new attribute to the model, not only it will be available in the export code (will see later how to get it) but also the element you see in the canvas is updated with new attributes.
</code></pre></div><divclass="tip custom-block"><pclass="custom-block-title">TIP</p><p>If you want to learn more about blocks we suggest to read its dedicated article: <ahref="/docs/modules/Blocks.html">Block Manager Module</a></p></div><h2id="define-components"><ahref="#define-components"aria-hidden="true"class="header-anchor">#</a> Define Components</h2><p>Technically, once you drop your HTML block inside the canvas each element of the content is transformed into a GrapesJS Component. A GrapesJS Component is an object containing information about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected in the View. Therefore, if you add a new attribute to the model, it will be available in the export code (which we will learn more about later), and the element you see in the canvas will be updated with new attributes.
While this is a common behavior what it's cool about Components that you can create a totally decoupled view and show to the user whatever you desire (so not necessary reflecting the model). For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If want to get more about Custom Components and how to create and extend them, we recommend to check out <ahref="/docs/modules/Components.html">Component Manager Module</a>.</p><p>GrapesJS comes along with few <ahref="/docs/modules/Components.html#built-in-components">built-in Components</a>which enable different core features once rendered in canvas. Just to mention few of them, by double clicking on the image component you will see show up the default <ahref="/docs/modules/Assets.html">Asset Manager</a>, which you can customize or integrate you own, by double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customizable and <ahref="/docs/guides/Replace-Rich-Text-Editor.html">replaceable</a>.</p><p>As we have seen before you can create Blocks directly as Components</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'my-block-id'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
This isn't totally out of the ordinary, but the unique thing about Components that you can create a totally decoupled View. This means you can show the user whatever you desire regardless of what is in the Model. For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If you want to learn more about Custom Components, you should check out <ahref="/docs/modules/Components.html">Component Manager Module</a>.</p><p>GrapesJS comes with a few <ahref="/docs/modules/Components.html#built-in-components">built-in Components</a>that enable different features once rendered in the canvas. For example, by double clicking on an image component you will see the default <ahref="/docs/modules/Assets.html">Asset Manager</a>, which you can customize or integrate you own. By double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customization and <ahref="/docs/guides/Replace-Rich-Text-Editor.html">replaceable</a>.</p><p>As we have seen before you can create Blocks directly as Components</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'my-block-id'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><divclass="tip custom-block"><pclass="custom-block-title">TIP</p><p>Check the <ahref="/docs/api/components.html">Components API</a> and see how to interact with components dynamically</p></div><p>An example on how to select some inner component and replace its children with new contents</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// The wrapper is the root Component</span>
</code></pre></div><divclass="tip custom-block"><pclass="custom-block-title">TIP</p><p>Check out the <ahref="/docs/api/components.html">Components API</a>to learn how to interact with components dynamically</p></div><p>An example on how to select some inner component and replace its children with new contents</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// The wrapper is the root Component</span>
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="panel__top3"class="panel__top"><divid="panel__basic-actions3"class="panel__basic-actions"></div></div><divid="gjs3"class="gjs"><h1>Hello World Component!</h1></div><divid="blocks3"></div></div></div><p>So, we have defined where to render the panel with <code>el: '#basic-panel'</code> and then for each button we added a <code>command</code> property. The command could be the id, an object with <code>run</code> and <code>stop</code> functions or simply a single function.
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="panel__top3"class="panel__top"><divid="panel__basic-actions3"class="panel__basic-actions"></div></div><divid="gjs3"class="gjs"><h1>Hello World Component!</h1></div><divid="blocks3"></div></div></div><p>We have defined where to render the panel with <code>el: '#basic-panel'</code> and then for each button we added a <code>command</code> property. The command could be the id, an object with <code>run</code> and <code>stop</code> functions or simply a single function.
Try to use <ahref="/docs/api/commands.html">Commands</a> when possible, they allow you to track actions globally and execute also callbacks before and after their execution (you can even interrupt them).</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span><spanclass="token function">on</span><spanclass="token punctuation">(</span><spanclass="token string">'run:export-template:before'</span><spanclass="token punctuation">,</span> opts <spanclass="token operator">=></span><spanclass="token punctuation">{</span>
Try to use <ahref="/docs/api/commands.html">Commands</a> when possible, they allow you to track actions globally.Commands also execute callbacks before and after their execution (you can even interrupt them).</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span><spanclass="token function">on</span><spanclass="token punctuation">(</span><spanclass="token string">'run:export-template:before'</span><spanclass="token punctuation">,</span> opts <spanclass="token operator">=></span><spanclass="token punctuation">{</span>
console<spanclass="token punctuation">.</span><spanclass="token function">log</span><spanclass="token punctuation">(</span><spanclass="token string">'Before the command run'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
console<spanclass="token punctuation">.</span><spanclass="token function">log</span><spanclass="token punctuation">(</span><spanclass="token string">'Before the command run'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<spanclass="token keyword">if</span><spanclass="token punctuation">(</span><spanclass="token number">0</span><spanclass="token comment">/* some condition */</span><spanclass="token punctuation">)</span><spanclass="token punctuation">{</span>
<spanclass="token keyword">if</span><spanclass="token punctuation">(</span><spanclass="token number">0</span><spanclass="token comment">/* some condition */</span><spanclass="token punctuation">)</span><spanclass="token punctuation">{</span>
</code></pre></div><divclass="tip custom-block"><pclass="custom-block-title">TIP</p><p>Check the <ahref="/docs/api/panels.html">Panels API</a> to see all the available methods</p></div><h2id="layers"><ahref="#layers"aria-hidden="true"class="header-anchor">#</a> Layers</h2><p>Another utility tool you might find useful when working with web elements is a layer manger. It's just a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it</p><divclass="language-html extra-class"><divclass="highlight-lines"><br><br><br><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><br><br></div><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">class</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>panel__top<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</code></pre></div><divclass="tip custom-block"><pclass="custom-block-title">TIP</p><p>Check out the <ahref="/docs/api/panels.html">Panels API</a> to see all the available methods</p></div><h2id="layers"><ahref="#layers"aria-hidden="true"class="header-anchor">#</a> Layers</h2><p>Another utility tool you might find useful when working with web elements is the layer manger. It's a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it</p><divclass="language-html extra-class"><divclass="highlight-lines"><br><br><br><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><divclass="highlighted"></div><br><br></div><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">class</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>panel__top<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="panel__top4"class="panel__top"><divid="panel__basic-actions4"class="panel__basic-actions"></div></div><divclass="editor-row"><divclass="editor-canvas"><divid="gjs4"class="gjs"><h1>Hello World Component!</h1></div></div><divid="panel__right4"class="panel__right"><divid="layers-container"></div></div></div><divid="blocks4"></div></div></div><h2id="style-manager"><ahref="#style-manager"aria-hidden="true"class="header-anchor">#</a> Style Manager</h2><p>Once you have defined the structure of the template probably the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.</p><p>Let's start from adding one more panel inside the <code>panel__right</code> and another one in <code>panel__top</code> which will contain a Layer/Style Manager switcher</p><divclass="language-html extra-class"><divclass="highlight-lines"><br><br><divclass="highlighted"></div><br><br><br><br><divclass="highlighted"></div><br><br><br></div><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">class</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>panel__top<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="panel__top4"class="panel__top"><divid="panel__basic-actions4"class="panel__basic-actions"></div></div><divclass="editor-row"><divclass="editor-canvas"><divid="gjs4"class="gjs"><h1>Hello World Component!</h1></div></div><divid="panel__right4"class="panel__right"><divid="layers-container"></div></div></div><divid="blocks4"></div></div></div><h2id="style-manager"><ahref="#style-manager"aria-hidden="true"class="header-anchor">#</a> Style Manager</h2><p>Once you have defined the structure of the template the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.</p><p>Let's start by adding one more panel inside the <code>panel__right</code> and another one in <code>panel__top</code> which will contain a Layer/Style Manager switcher</p><divclass="language-html extra-class"><divclass="highlight-lines"><br><br><divclass="highlighted"></div><br><br><br><br><divclass="highlighted"></div><br><br><br></div><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">class</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>panel__top<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="panel__top5"class="panel__top"><divid="panel__basic-actions5"class="panel__basic-actions"></div><divid="panel__switcher5"class="panel__switcher"></div></div><divclass="editor-row"><divclass="editor-canvas"><divid="gjs5"class="gjs"><h1>Hello World Component!</h1></div></div><divid="panel__right5"class="panel__right"><divid="layers-container5"class="layers-container"></div><divid="styles-container5"class="styles-container"></div></div></div><divid="blocks5"></div></div></div><p>Inside Style Manager definition we use <code>buildProps</code> which helps us create common properties from <ahref="/docs/modules/Style-manager.html#built-in-properties">available built-in objects</a> then in <code>properties</code> we can override same objects (eg. passing another <code>name</code> to change the label) identified by <code>property</code> name. As you can see from <code>custom-prop</code> example it's a matter of defining the CSS <code>property</code> and the input <code>type</code>. We suggest to check a more complete example of Style Manager properties usage from the <ahref="https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1000"target="_blank"rel="noopener noreferrer">webpage preset demo<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><divclass="tip custom-block"><pclass="custom-block-title">TIP</p><p>Check the <ahref="/docs/api/panels.html">Style Manager API</a> to see how to update sectors and properties dynamically</p></div><h2id="traits"><ahref="#traits"aria-hidden="true"class="header-anchor">#</a> Traits</h2><p>Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. A common use of traits is the ability to update HTML element attributes (eg. <code>placeholder</code> for inputs or <code>alt</code> for images) but you can also define your own custom traits, access the selected Component model and do whatever you want. For this guide, we just gonna show you how to render available traits, for more details on how to extend them we suggest to read the <ahref="/docs/modules/Traits.html">Trait Manager Module page</a>.</p><p>Let's create a new container for traits, tell the editor where to render it and update the sidebar switcher</p><divclass="language-html extra-class"><divclass="highlight-lines"><br><br><br><br><divclass="highlighted"></div><br><br><br></div><preclass="language-html"><code>...
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="panel__top5"class="panel__top"><divid="panel__basic-actions5"class="panel__basic-actions"></div><divid="panel__switcher5"class="panel__switcher"></div></div><divclass="editor-row"><divclass="editor-canvas"><divid="gjs5"class="gjs"><h1>Hello World Component!</h1></div></div><divid="panel__right5"class="panel__right"><divid="layers-container5"class="layers-container"></div><divid="styles-container5"class="styles-container"></div></div></div><divid="blocks5"></div></div></div><p>Inside Style Manager definition we use <code>buildProps</code> which helps us create common properties from <ahref="/docs/modules/Style-manager.html#built-in-properties">available built-in objects</a> then in <code>properties</code> we can override same objects (eg. passing another <code>name</code> to change the label) identified by <code>property</code> name. As you can see from <code>custom-prop</code> example it's a matter of defining the CSS <code>property</code> and the input <code>type</code>. We suggest to check a more complete example of Style Manager properties usage from the <ahref="https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1000"target="_blank"rel="noopener noreferrer">webpage preset demo<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><divclass="tip custom-block"><pclass="custom-block-title">TIP</p><p>Check the <ahref="/docs/api/panels.html">Style Manager API</a> to see how to update sectors and properties dynamically</p></div><h2id="traits"><ahref="#traits"aria-hidden="true"class="header-anchor">#</a> Traits</h2><p>Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. Traits are commonly used to update HTML element attributes (eg. <code>placeholder</code> for inputs or <code>alt</code> for images), but you can also define your own custom traits. Access the selected Component model and do whatever you want. For this guide, we going to show you how to render available traits, for more details on how to extend them we suggest you read the <ahref="/docs/modules/Traits.html">Trait Manager Module page</a>.</p><p>Let's create a new container for traits. Tell the editor where to render it and update the sidebar switcher</p><divclass="language-html extra-class"><divclass="highlight-lines"><br><br><br><br><divclass="highlighted"></div><br><br><br></div><preclass="language-html"><code>...
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="panel__top6"class="panel__top"><divid="panel__basic-actions6"class="panel__basic-actions"></div><divid="panel__switcher6"class="panel__switcher"></div></div><divclass="editor-row"><divclass="editor-canvas"><divid="gjs6"class="gjs"><h1>Hello World Component!</h1></div></div><divid="panel__right6"class="panel__right"><divid="layers-container6"class="layers-container"></div><divid="styles-container6"class="styles-container"></div><divid="traits-container6"class="traits-container"></div></div></div><divid="blocks6"></div></div></div><p>Now if you switch to the Trait panel and select some of the inner component you should see its default traits.</p><h2id="responsive-templates"><ahref="#responsive-templates"aria-hidden="true"class="header-anchor">#</a> Responsive templates</h2><p>GrapesJS implements also a module which allows you to work with responsive templates easily. Let's see how to define different devices and some button for device switching</p><divclass="language-html extra-class"><divclass="highlight-lines"><br><br><divclass="highlighted"></div><br><br><br><br></div><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">class</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>panel__top<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="panel__top6"class="panel__top"><divid="panel__basic-actions6"class="panel__basic-actions"></div><divid="panel__switcher6"class="panel__switcher"></div></div><divclass="editor-row"><divclass="editor-canvas"><divid="gjs6"class="gjs"><h1>Hello World Component!</h1></div></div><divid="panel__right6"class="panel__right"><divid="layers-container6"class="layers-container"></div><divid="styles-container6"class="styles-container"></div><divid="traits-container6"class="traits-container"></div></div></div><divid="blocks6"></div></div></div><p>Now if you switch to the Trait panel and select one of the inner components you should see its default traits.</p><h2id="responsive-templates"><ahref="#responsive-templates"aria-hidden="true"class="header-anchor">#</a> Responsive templates</h2><p>GrapesJS implements a module which allows you to work with responsive templates easily. Let's see how to define different devices and a button for device switching</p><divclass="language-html extra-class"><divclass="highlight-lines"><br><br><divclass="highlighted"></div><br><br><br><br></div><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">class</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>panel__top<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="panel__top7"class="panel__top"><divid="panel__basic-actions7"class="panel__basic-actions"></div><divid="panel__devices7"class="panel__devices"></div><divid="panel__switcher7"class="panel__switcher"></div></div><divclass="editor-row"><divclass="editor-canvas"><divid="gjs7"class="gjs"><h1>Hello World Component!</h1></div></div><divid="panel__right7"class="panel__right"><divid="layers-container7"class="layers-container"></div><divid="styles-container7"class="styles-container"></div><divid="traits-container7"class="traits-container"></div></div></div><divid="blocks7"></div></div></div><p>As you can see from the commands definition we just use the <code>editor.setDevice</code> method to change the size of the viewport. In case you need to trigger some action on device change you can setup a listener like this:</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span><spanclass="token function">on</span><spanclass="token punctuation">(</span><spanclass="token string">'change:device'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token operator">=></span> console<spanclass="token punctuation">.</span><spanclass="token function">log</span><spanclass="token punctuation">(</span><spanclass="token string">'Current device: '</span><spanclass="token punctuation">,</span> editor<spanclass="token punctuation">.</span><spanclass="token function">getDevice</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">)</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><divclass="demo-container"data-v-b3715568><div><divid="panel__top7"class="panel__top"><divid="panel__basic-actions7"class="panel__basic-actions"></div><divid="panel__devices7"class="panel__devices"></div><divid="panel__switcher7"class="panel__switcher"></div></div><divclass="editor-row"><divclass="editor-canvas"><divid="gjs7"class="gjs"><h1>Hello World Component!</h1></div></div><divid="panel__right7"class="panel__right"><divid="layers-container7"class="layers-container"></div><divid="styles-container7"class="styles-container"></div><divid="traits-container7"class="traits-container"></div></div></div><divid="blocks7"></div></div></div><p>As you can see from the commands definition we use the <code>editor.setDevice</code> method to change the size of the viewport. In case you need to trigger an action on device change you can setup a listener like this:</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span><spanclass="token function">on</span><spanclass="token punctuation">(</span><spanclass="token string">'change:device'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token operator">=></span> console<spanclass="token punctuation">.</span><spanclass="token function">log</span><spanclass="token punctuation">(</span><spanclass="token string">'Current device: '</span><spanclass="token punctuation">,</span> editor<spanclass="token punctuation">.</span><spanclass="token function">getDevice</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">)</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>What about the mobile-first approach? You can achieve it by changing your configurations in this way:</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>What about the mobile-first approach? You can achieve it by changing your configurations in this way:</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">// ...</span>
<spanclass="token comment">// ...</span>
mediaCondition<spanclass="token punctuation">:</span><spanclass="token string">'min-width'</span><spanclass="token punctuation">,</span><spanclass="token comment">// default is `max-width`</span>
mediaCondition<spanclass="token punctuation">:</span><spanclass="token string">'min-width'</span><spanclass="token punctuation">,</span><spanclass="token comment">// default is `max-width`</span>
</code></pre></div><divclass="tip custom-block"><pclass="custom-block-title">TIP</p><p>Check the <ahref="/docs/api/panels.html">Device Manager API</a> to get all available methods</p></div><h2id="store-load-data"><ahref="#store-load-data"aria-hidden="true"class="header-anchor">#</a> Store & load data</h2><p>Once you finished with defining you builder interface the next step would be to setup the storing and loading process.
</code></pre></div><divclass="tip custom-block"><pclass="custom-block-title">TIP</p><p>Check out the <ahref="/docs/api/panels.html">Device Manager API</a> to see all the available methods</p></div><h2id="store-load-data"><ahref="#store-load-data"aria-hidden="true"class="header-anchor">#</a> Store & load data</h2><p>Once you have finished with defining your builder interface the next step would be to setup the storing and loading process.
GrapesJS implements 2 simple type of storages inside its Storage Manager, the local (by using <code>localStorage</code>, active by default) and the remote one. Those are enough to cover most of the cases, but it's also possible to add new implementations (<ahref="https://github.com/artf/grapesjs-indexeddb"target="_blank"rel="noopener noreferrer">grapesjs-indexeddb<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> is a good example).
GrapesJS implements 2 simple type of storages inside its Storage Manager: The local (by using <code>localStorage</code>, active by default) and the remote one. Those are enough to cover most of the cases, but it's also possible to add new implementations (<ahref="https://github.com/artf/grapesjs-indexeddb"target="_blank"rel="noopener noreferrer">grapesjs-indexeddb<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> is a good example).
Let's see how the default options looks like</p><divclass="language-js extra-class"><preclass="language-js"><code>grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
Let's see how the default options work</p><divclass="language-js extra-class"><preclass="language-js"><code>grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
id<spanclass="token punctuation">:</span><spanclass="token string">'gjs-'</span><spanclass="token punctuation">,</span><spanclass="token comment">// Prefix identifier that will be used inside storing and loading</span>
id<spanclass="token punctuation">:</span><spanclass="token string">'gjs-'</span><spanclass="token punctuation">,</span><spanclass="token comment">// Prefix identifier that will be used inside storing and loading</span>
@ -504,7 +502,7 @@ Let's see how the default options looks like</p><div class="language-js extra-cl
storeCss<spanclass="token punctuation">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Enable/Disable storing of rules as CSS string</span>
storeCss<spanclass="token punctuation">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Enable/Disable storing of rules as CSS string</span>
</code></pre></div><p>Worth noting the default <code>id</code> parameter which adds a prefix for all keys to store. If you check the <code>localStorage</code> inside the devtool panel you'll see something like <code>{ 'gjs-components': '....' ...}</code>in this way it prevents the risk of collisions.</p><p>Let's check also the configuration required to setup the remote storage</p><divclass="language-js extra-class"><preclass="language-js"><code>grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><p>It is worth noting that the default <code>id</code> parameter adds a prefix for all keys to store. If you check the <code>localStorage</code> inside the devtool panel you'll see something like <code>{ 'gjs-components': '....' ...}</code>this way it lessens the risk of collisions.</p><p>Let's look at the configuration required to setup the remote storage</p><divclass="language-js extra-class"><preclass="language-js"><code>grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><p>As you might noticed, we've left some default option unchanged, increased changes necessary for autosave triggering and passed remote endpoints.
</code></pre></div><p>As you might noticed, we've left some default options unchanged: Increased changes necessary for autosave triggering and passed remote endpoints.
If you prefer you could also disable the autosaving and do it by yourself using some custom command</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// ...</span>
If you prefer you could also disable the autosaving and you can do so using a custom command</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// ...</span>
@ -535,7 +533,7 @@ If you prefer you could also disable the autosaving and do it by yourself using
<spanclass="token punctuation">]</span>
<spanclass="token punctuation">]</span>
<spanclass="token punctuation">}</span>
<spanclass="token punctuation">}</span>
<spanclass="token comment">// ...</span>
<spanclass="token comment">// ...</span>
</code></pre></div><p>To get a better overview of the Storage Manager, how correctly you should store/load the template and how to define new storages you have to read the <ahref="/docs/modules/Storage.html">Storage Manager Module</a> page</p><h2id="theming"><ahref="#theming"aria-hidden="true"class="header-anchor">#</a> Theming</h2><p>One last step that might actually improve a lot your editor personality is how it's look visually. To achieve an easy theming we have adapted an atomic design for this purpose. To customize the main palette of colors all you have to do is to change few CSS rules or if you include GrapesJS styles via SCSS you can make use of its <ahref="https://github.com/artf/grapesjs/blob/dev/src/styles/scss/_gjs_variables.scss"target="_blank"rel="noopener noreferrer">internal variables<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> and declare yours before the import</p><divclass="language-scss extra-class"><preclass="language-scss"><code><spanclass="token comment">// Put your variables before the grapesjs style import</span>
</code></pre></div><p>To get a better overview of the Storage Manager and how you should store/load the template, or how to define new storages you should read the <ahref="/docs/modules/Storage.html">Storage Manager Module</a> page</p><h2id="theming"><ahref="#theming"aria-hidden="true"class="header-anchor">#</a> Theming</h2><p>One last step that might actually improve a lot your editor personality is how it's look visually. To achieve an easy theming we have adapted an atomic design for this purpose. To customize the main palette of colors all you have to do is to change few CSS rules. Alternatively if you include GrapesJS styles via SCSS you can make use of its <ahref="https://github.com/artf/grapesjs/blob/dev/src/styles/scss/_gjs_variables.scss"target="_blank"rel="noopener noreferrer">internal variables<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> and declare your variables before the import</p><divclass="language-scss extra-class"><preclass="language-scss"><code><spanclass="token comment">// Put your variables before the GrapesJS style import</span>
</code></pre></div><p>In case of a simple CSS you just have to put your rules after the GrapesJS styles.
</code></pre></div><p>In case of a simple CSS you'll have to put your rules after the GrapesJS styles.
To complete our builder let's customize its color palette and to make it more visually "readable" we gonna replace all button labels with SVG icons</p><divclass="language-css extra-class"><preclass="language-css"><code><spanclass="token comment">/* We can remove the border we've set at the beginnig */</span>
To complete our builder let's customize its color palette and to make it more visually "readable" we can replace all button labels with SVG icons</p><divclass="language-css extra-class"><preclass="language-css"><code><spanclass="token comment">/* We can remove the border we've set at the beginnig */</span>
</code></pre></div><p>and here is our final result</p><divid="final-result"class="demo-container"data-v-b3715568><divclass="gjs__themed"><divid="panel__top8"class="panel__top"><divid="panel__basic-actions8"class="panel__basic-actions"></div><divid="panel__devices8"class="panel__devices"></div><divid="panel__switcher8"class="panel__switcher"></div></div><divclass="editor-row"><divclass="editor-canvas"><divid="gjs8"class="gjs"><h1>Hello World Component!</h1></div></div><divid="panel__right8"class="panel__right"><divid="layers-container8"class="layers-container"></div><divid="styles-container8"class="styles-container"></div><divid="traits-container8"class="traits-container"></div></div></div><divid="blocks8"></div></div></div></div><divclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/getting-started.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">7/14/2018, 1:29:46 AM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
</code></pre></div><p>and here is our final result</p><divid="final-result"class="demo-container"data-v-b3715568><divclass="gjs__themed"><divid="panel__top8"class="panel__top"><divid="panel__basic-actions8"class="panel__basic-actions"></div><divid="panel__devices8"class="panel__devices"></div><divid="panel__switcher8"class="panel__switcher"></div></div><divclass="editor-row"><divclass="editor-canvas"><divid="gjs8"class="gjs"><h1>Hello World Component!</h1></div></div><divid="panel__right8"class="panel__right"><divid="layers-container8"class="layers-container"></div><divid="styles-container8"class="styles-container"></div><divid="traits-container8"class="traits-container"></div></div></div><divid="blocks8"></div></div></div></div><divclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/getting-started.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">10/26/2018, 1:39:09 PM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="active sidebar-link">Asset Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#configuration"class="sidebar-link">Configuration</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#initialization"class="sidebar-link">Initialization</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#customization"class="sidebar-link">Customization</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#uploading-assets"class="sidebar-link">Uploading assets</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#events"class="sidebar-link">Events</a></li></ul></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="asset-manager"><ahref="#asset-manager"aria-hidden="true"class="header-anchor">#</a> Asset Manager</h1><palign="center"><imgsrc="http://grapesjs.com/img/sc-grapesjs-assets-1.jpg"alt="GrapesJS - Asset Manager"align="center"></p><p>In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS, which is intentionally lightweight and implements just an <code>image</code> in its core, but as you'll see next it's easy to extend and create your own asset types.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#configuration">Configuration</a></li><li><ahref="#initialization">Initialization</a></li><li><ahref="#customization">Customization</a><ul><li><ahref="#define-new-asset-type">Define new Asset type</a></li><li><ahref="#extend-asset-types">Extend Asset Types</a></li></ul></li><li><ahref="#uploading-assets">Uploading assets</a><ul><li><ahref="#listeners">Listeners</a></li><li><ahref="#response">Response</a></li><li><ahref="#setup-dropzone">Setup Dropzone</a></li></ul></li><li><ahref="#events">Events</a></li></ul></div><p></p><h2id="configuration"><ahref="#configuration"aria-hidden="true"class="header-anchor">#</a> Configuration</h2><p>To change default configurations you have to pass <code>assetManager</code> property with the main configuration object</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="active sidebar-link">Asset Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#configuration"class="sidebar-link">Configuration</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#initialization"class="sidebar-link">Initialization</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#customization"class="sidebar-link">Customization</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#uploading-assets"class="sidebar-link">Uploading assets</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Assets.html#events"class="sidebar-link">Events</a></li></ul></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="asset-manager"><ahref="#asset-manager"aria-hidden="true"class="header-anchor">#</a> Asset Manager</h1><palign="center"><imgsrc="http://grapesjs.com/img/sc-grapesjs-assets-1.jpg"alt="GrapesJS - Asset Manager"align="center"></p><p>In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS. 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"aria-hidden="true"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>
</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 the 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>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>Not always docs are in inline with its code, 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<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h2id="initialization"><ahref="#initialization"aria-hidden="true"class="header-anchor">#</a> Initialization</h2><p>The Asset Manager is ready to work by default, so just 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>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<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h2id="initialization"><ahref="#initialization"aria-hidden="true"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 the source <ahref="https://github.com/artf/grapesjs/blob/dev/src/asset_manager/model/AssetImage.js"target="_blank"rel="noopener noreferrer">AssetImage Model<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><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>Showing up of the modal 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<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><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>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>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 if you call the <code>render()</code>, without any 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>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>
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">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>
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>Obviously, you can mix more 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>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>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"aria-hidden="true"class="header-anchor">#</a> Define new Asset type</h3><p>Generally speaking, an asset is not only an image, it could be a <code>video</code>, <code>svg-icon</code>, or any other kind of <code>document</code>. Each type of the 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, but in case of<code>svg-icon</code>, for instance, 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, like 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 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>
</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"aria-hidden="true"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">// string, url, ends with '.png' -> it's an 'image' type</span>
<spanclass="token comment">// an object, has 'video' type key -> 'video' type</span>
<spanclass="token comment">// an object, has 'video' type key -> 'video' type</span>
</code></pre></div><p>Obviously, it's up to you tell the editor how to recognize your type and for this purpose you have to use <code>isType()</code> method.
</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>
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>
<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 correctly 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>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 correctly rendered 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>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>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 which should group the business logic of your asset but usually it's optional so you can skip this part.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Just an example of model use</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"aria-hidden="true"class="header-anchor">#</a> Extend Asset Types</h3><p>Extending asset types is basically the same as adding them, you can just 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><h3id="extend-asset-types"><ahref="#extend-asset-types"aria-hidden="true"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><h2id="uploading-assets"><ahref="#uploading-assets"aria-hidden="true"class="header-anchor">#</a> Uploading assets</h2><p>Asset Manager includes an easy to use, drag and drop, uploader and integrates 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 start select your files or just drag them directly from your computer to trigger the uploader. Obviously, before make it work you have to setup your server in order to receive your assets and specify the upload endpoint in configurations</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><h2id="uploading-assets"><ahref="#uploading-assets"aria-hidden="true"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"aria-hidden="true"class="header-anchor">#</a> Listeners</h3><p>If you want to execute some 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"aria-hidden="true"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"aria-hidden="true"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="response"><ahref="#response"aria-hidden="true"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="setup-dropzone"><ahref="#setup-dropzone"aria-hidden="true"class="header-anchor">#</a> Setup Dropzone</h3><p>There is also another helper which improve 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><h3id="setup-dropzone"><ahref="#setup-dropzone"aria-hidden="true"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>
dropzoneContent<spanclass="token punctuation">:</span><spanclass="token string">'<div class="dropzone-inner">Drop here your assets</div>'</span>
dropzoneContent<spanclass="token punctuation">:</span><spanclass="token string">'<div class="dropzone-inner">Drop here your assets</div>'</span>
</code></pre></div><h2id="events"><ahref="#events"aria-hidden="true"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><divclass="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><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">9/17/2018, 3:16:58 AM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
</code></pre></div><h2id="events"><ahref="#events"aria-hidden="true"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><divclass="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><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">10/26/2018, 1:52:41 PM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="active sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="block-manager"><ahref="#block-manager"aria-hidden="true"class="header-anchor">#</a> Block Manager</h1><palign="center"><imgsrc="http://grapesjs.com/img/sc-grapesjs-blocks-prp.jpg"alt="GrapesJS - Block Manager"height="400"align="center"></p><p>The Block is a group of <ahref="Components">Components</a> and can be easily reused inside templates.</p><p>To better understand the difference between components and blocks, the component is more atomic so, for example, a single image, a text box or a map fits perfectly in this concept. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).</p><p>Check <ahref="Components">Components</a> page to see the list of built-in components and how to create your own.</p><p>Let's see how to add a new block to the editor using the <ahref="API-Block-Manager">Blocks API</a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="active sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="block-manager"><ahref="#block-manager"aria-hidden="true"class="header-anchor">#</a> Block Manager</h1><palign="center"><imgsrc="http://grapesjs.com/img/sc-grapesjs-blocks-prp.jpg"alt="GrapesJS - Block Manager"height="400"align="center"></p><p>The Block is a group of <ahref="/docs/modules/Components.html">Components</a> and can be easily reused inside templates.</p><p>The difference between components and blocks: The component is more atomic, so a single image, a text box or a map is a component. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).</p><p>Check out the <ahref="/docs/modules/Components.html">Components</a> page to see the list of built-in components and how to create your own.</p><p>Let's see how to add a new block to the editor using the <ahref="/docs/api/block_manager.html">Blocks API</a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>As you see a simple HTML string is enough to create a block, the editor will do the rest.
</code></pre></div><p>As you see a simple HTML string is enough to create a block, the editor will do the rest.
If you want you could also pass an object representing the <ahref="Component">Component</a>.</p><divclass="language-js extra-class"><preclass="language-js"><code>blockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'my-map-block'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
If you want you could also pass an object representing the <ahref="/docs/api/component.html">Component</a>.</p><divclass="language-js extra-class"><preclass="language-js"><code>blockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'my-map-block'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
@ -52,7 +52,7 @@ If you want you could also pass an object representing the <a href="Component">C
removable<spanclass="token punctuation">:</span><spanclass="token boolean">false</span><spanclass="token punctuation">,</span><spanclass="token comment">// Once inserted it can't be removed</span>
removable<spanclass="token punctuation">:</span><spanclass="token boolean">false</span><spanclass="token punctuation">,</span><spanclass="token comment">// Once inserted it can't be removed</span>
</code></pre></div><p>From the v0.3.70 it's also possible to pass the HTML string with Component's properties as attributes.</p><divclass="language-js extra-class"><preclass="language-js"><code>blockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'the-row-block'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>From v0.3.70 it's also possible to pass the HTML string with Component's properties as attributes.</p><divclass="language-js extra-class"><preclass="language-js"><code>blockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'the-row-block'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>In the example above you're defining a row component which will accept only elements which match '.row-cell' selector and cells which could be dragged only inside '.row' elements. We're also defining the custom name which will be seen inside the Layers panel.
</code></pre></div><p>In the example above you're defining a row component which will accept only elements which match '.row-cell' selector and cells which could be dragged only inside '.row' elements. We're also defining the custom name which will be seen inside the Layers panel.
If you want to check the complete list of available Component's properties, check directly the Component model source:
If you want to check the complete list of available Component's properties, check directly the Component model source:
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="active sidebar-link">Components & JS</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#basic-scripts"class="sidebar-link">Basic scripts</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#dependencies"class="sidebar-link">Dependencies</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#examples"class="sidebar-link">Examples</a></li></ul></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="components-js"><ahref="#components-js"aria-hidden="true"class="header-anchor">#</a> Components & JS</h1><p>In this guide you'll see how to attach component related scripts and deal with external javascript libraries (for stuff like counters, galleries, slideshows, etc.)</p><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-scripts">Basic scripts</a></li><li><ahref="#dependencies">Dependencies</a><ul><li><ahref="#component-related">Component related</a></li><li><ahref="#template-related">Template related</a></li></ul></li><li><ahref="#examples">Examples</a></li></ul></div><p></p><h2id="basic-scripts"><ahref="#basic-scripts"aria-hidden="true"class="header-anchor">#</a> Basic scripts</h2><p>Let's see how to create a component with scripts using Blocks.</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'test-block'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="active sidebar-link">Components & JS</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#basic-scripts"class="sidebar-link">Basic scripts</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#dependencies"class="sidebar-link">Dependencies</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#examples"class="sidebar-link">Examples</a></li></ul></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="components-js"><ahref="#components-js"aria-hidden="true"class="header-anchor">#</a> Components & JS</h1><p>In this guide you'll see how to attach component related scripts and deal with external JavaScript libraries (for stuff like counters, galleries, slideshows, etc.)</p><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-scripts">Basic scripts</a></li><li><ahref="#dependencies">Dependencies</a><ul><li><ahref="#component-related">Component related</a></li><li><ahref="#template-related">Template related</a></li></ul></li><li><ahref="#examples">Examples</a></li></ul></div><p></p><h2id="basic-scripts"><ahref="#basic-scripts"aria-hidden="true"class="header-anchor">#</a> Basic scripts</h2><p>Let's see how to create a component with scripts using Blocks.</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'test-block'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Now if you drag the new block inside the canvas you'll see an alert popup and the message in console, as you might expected.
</code></pre></div><p>Now if you drag the new block inside the canvas you'll see an alert and the message in console, as you might expect.
One thing worth noting is that <code>this</code> context is binded to the component element, so, for example, if you want to change some property you'd do <code>this.innerHTML = 'inner content'</code>.</p><p>One thing you should take in account is how the script is binded to component once rendered in the canvas or in your final template. If you check now the generated HTML coded by the editor (via Export button or <code>editor.getHtml()</code>), you might see something like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">id</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>c764<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"></</span>div</span><spanclass="token punctuation">></span></span>
One thing worth noting is that <code>this</code> context is bound to the component element, so if you wanted to change a property you'd do <code>this.innerHTML = 'inner content'</code>.</p><p>One thing you should take in account is how the script is bound to component once rendered in the canvas or in your final template. If you check now the generated HTML coded by the editor (via Export button or <code>editor.getHtml()</code>), you might see something like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">id</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>c764<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"></</span>div</span><spanclass="token punctuation">></span></span>
</code></pre></div><p>Keep in mind that all component scripts are executed only inside the iframe of the canvas (isolated, just like your final template), therefore are NOT part of the current <code>document</code> and all your external libraries (eg. JQuery) are not there, but you'll see further how to manage scripted components with dependencies.</p><p>One thing you might be concerned about is a string used for the <code>script</code>, definitely not the best way to deal with a code, for this reason GrapesJS is able also to handle functions for you, so the previous example might look like this:</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'test-block'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Keep in mind that all component scripts are executed only inside the iframe of the canvas (isolated, just like your final template), and therefore are NOT part of the current <code>document</code>. All your external libraries (eg. jQuery) are not there, but you'll see later how to manage scripted components with dependencies.</p><p>One thing you might be concerned about is a string used for the <code>script</code>, definitely not the best way to deal with a code, for this reason GrapesJS is able also to handle functions for you, so the previous example might look like this:</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'test-block'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Much easier now, but be aware of a string conversion, you can't use variables outside of the function scope, let's see this scenario</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> myVar <spanclass="token operator">=</span><spanclass="token string">'John'</span><spanclass="token punctuation">;</span>
</code></pre></div><p>This is much better, but be aware of a string conversion, you can't use variables outside of the function scope. Take a look at this scenario:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> myVar <spanclass="token operator">=</span><spanclass="token string">'John'</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Unfortunately, this won't work as you'll get undefined <code>myVar</code> error. The final HTML, with script functions converted to string, will look like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">id</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>c764<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"></</span>div</span><spanclass="token punctuation">></span></span>
</code></pre></div><p>Unfortunately, this won't work. You'll get an undefined <code>myVar</code> error. The final HTML, with script functions converted to string, will look like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token attr-name">id</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>c764<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"></</span>div</span><spanclass="token punctuation">></span></span>
</code></pre></div><p>There is actually a solution to make your scripts behave dynamically, you can interpolate properties of the component model.</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'test-block'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>There is a solution to make your scripts behave dynamically. You can interpolate properties of the component model.</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'test-block'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>You can even change tags used for the interpolation</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><p>You can even change the tags used for the interpolation</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><p>You can use this technique with <ahref="https://github.com/artf/grapesjs/wiki/Traits#add-traits-to-components"target="_blank"rel="noopener noreferrer">property Traits<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> to create highly customizable components.</p><h2id="dependencies"><ahref="#dependencies"aria-hidden="true"class="header-anchor">#</a> Dependencies</h2><p>As we mentioned above, scripts are executed independently inside the iframe of the canvas, where you won't find any dependency, so exactly as the final HTML generated by the editor.
</code></pre></div><p>You can use this technique with <ahref="https://github.com/artf/grapesjs/wiki/Traits#add-traits-to-components"target="_blank"rel="noopener noreferrer">property Traits<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> to create custom components.</p><h2id="dependencies"><ahref="#dependencies"aria-hidden="true"class="header-anchor">#</a> Dependencies</h2><p>As we mentioned above, scripts are executed independently inside the iframe of the canvas, without any dependencies, so exactly as the final HTML generated by the editor.
If you want to make use of external libraries you have basically 2 types of approaches, component related and template related.</p><h3id="component-related"><ahref="#component-related"aria-hidden="true"class="header-anchor">#</a> Component related</h3><p>If you're building, for example, a slider component based on some third-party library you probably would like to include the external file only when the component is actually dragged inside the canvas, in this case, component related approaches is the perfect one as it's loading external libraries dynamically.
If you want to make use of external libraries you have two approaches: component-related and template-related.</p><h3id="component-related"><ahref="#component-related"aria-hidden="true"class="header-anchor">#</a> Component related</h3><p>If you're building a slider component based on some third-party library you probably would like to include the external file only when the component is actually dragged inside the canvas. In this case, the component-related approach is the perfect one as it's loading external libraries dynamically.
All you have to do is to require the dependency when is needed and then call your script.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
All you have to do is to require the dependency when it is needed and then call your script.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><h3id="template-related"><ahref="#template-related"aria-hidden="true"class="header-anchor">#</a> Template related</h3><p>Some dependency might be highly used along all your components (eg. JQuery) so instead requiring it inside each script you might want to inject it directly inside the canvas:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><h3id="template-related"><ahref="#template-related"aria-hidden="true"class="header-anchor">#</a> Template related</h3><p>A dependency might be used along all your components (eg. JQuery) so instead requiring it inside each script you might want to inject it directly inside the canvas:</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>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="active sidebar-link">Component Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#built-in-components"class="sidebar-link">Built-in components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#how-components-work"class="sidebar-link">How Components work?</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#component-recognition"class="sidebar-link">Component recognition</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#define-new-component"class="sidebar-link">Define new Component</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#update-component-type"class="sidebar-link">Update Component type</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#components-js"class="sidebar-link">Components & JS</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#hints"class="sidebar-link">Hints</a></li></ul></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="component-manager"><ahref="#component-manager"aria-hidden="true"class="header-anchor">#</a> Component Manager</h1><p>The Component is the base element for the template composition and, usually, elements like images, text boxes, maps, etc. fit perfectly in this concept. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-components">Built-in components</a></li><li><ahref="#how-components-work">How Components work?</a></li><li><ahref="#component-recognition">Component recognition</a></li><li><ahref="#define-new-component">Define new Component</a></li><li><ahref="#update-component-type">Update Component type</a></li><li><ahref="#components-js">Components & JS</a></li><li><ahref="#hints">Hints</a></li></ul></div><p></p><h2id="built-in-components"><ahref="#built-in-components"aria-hidden="true"class="header-anchor">#</a> Built-in components</h2><ul><li>Default (Basic)</li><li>Text</li><li>Image</li><li>Video</li><li>Link</li><li>Map</li><li>Table</li><li>Row (for the table)</li><li>Cell (for the table)</li></ul><h2id="how-components-work"><ahref="#how-components-work"aria-hidden="true"class="header-anchor">#</a> How Components work?</h2><p>When we pass an HTML string to the editor like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token punctuation">></span></span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="active sidebar-link">Component Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#built-in-components"class="sidebar-link">Built-in components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#how-components-work"class="sidebar-link">How Components work?</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#component-recognition"class="sidebar-link">Component recognition</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#define-new-component"class="sidebar-link">Define new Component</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#update-component-type"class="sidebar-link">Update Component type</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#components-js"class="sidebar-link">Components & JS</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#hints"class="sidebar-link">Hints</a></li></ul></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="component-manager"><ahref="#component-manager"aria-hidden="true"class="header-anchor">#</a> Component Manager</h1><p>The Component is the base element for template composition. It is atomic, so elements like images, text boxes, maps, etc. fit the definition of a Component. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-components">Built-in components</a></li><li><ahref="#how-components-work">How Components work?</a></li><li><ahref="#component-recognition">Component recognition</a></li><li><ahref="#define-new-component">Define new Component</a></li><li><ahref="#update-component-type">Update Component type</a></li><li><ahref="#components-js">Components & JS</a></li><li><ahref="#hints">Hints</a></li></ul></div><p></p><h2id="built-in-components"><ahref="#built-in-components"aria-hidden="true"class="header-anchor">#</a> Built-in components</h2><ul><li>Default (Basic)</li><li>Text</li><li>Image</li><li>Video</li><li>Link</li><li>Map</li><li>Table</li><li>Row (for the table)</li><li>Cell (for the table)</li></ul><h2id="how-components-work"><ahref="#how-components-work"aria-hidden="true"class="header-anchor">#</a> How Components work?</h2><p>When we pass an HTML string to the editor like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token punctuation">></span></span>
</code></pre></div><p>The editor will create and store, for each DOM element, its object representation and all next changes to the template will be made on top of this structure, which will then reflect on canvas. So, each object, usually called <em>Model</em> (or state/store), will be the source of truth for the template, but what exactly does it mean? For instance, in more practical way, once the template is rendered on the canvas, if you try to remove one of the elements using the browser inspector and then ask the editor to print the HTML (using <code>editor.getHtml()</code>) you'll see, from the code, that the element will still be there, this because the editor relies on Models and not on the DOM inside the canvas. This approach allows us to be extremely flexible on how to generate the final code (from the <em>Model</em>) and how to render it inside the canvas (from the <em>View</em>).</p><h1id="manage-components"><ahref="#manage-components"aria-hidden="true"class="header-anchor">#</a> Manage Components</h1><h2id="component-recognition"><ahref="#component-recognition"aria-hidden="true"class="header-anchor">#</a> Component recognition</h2><p>But now, how does the editor recognize which Component to bind to the <code>img</code> element and what to do with the <code>span</code> one?
</code></pre></div><p>For each DOM element the editor will create and store an object representation. Every future change to the template will be made on top of this structure, which will then reflect on the canvas. So each object, usually called <em>Model</em> (or state/store), will be the source of truth for the template, but what exactly does that mean? In more practical example, once the template is rendered on the canvas, if you try to remove one of the elements using the browser inspector and then ask the editor to print the HTML (using <code>editor.getHtml()</code>) you'll see that the element will still be present. This is because the editor relies on Models and not on the DOM inside the canvas. This approach allows us to be extremely flexible on how we generate the final code (from the <em>Model</em>) and how to render it inside the canvas (from the <em>View</em>).</p><h1id="manage-components"><ahref="#manage-components"aria-hidden="true"class="header-anchor">#</a> Manage Components</h1><h2id="component-recognition"><ahref="#component-recognition"aria-hidden="true"class="header-anchor">#</a> Component recognition</h2><p>But now, how does the editor recognize which Component to bind to the <code>img</code> element and what to do with the <code>span</code> one?
Each Component inherits, from the base one, a particular static method</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">/**
Each Component inherits, from the base one, a particular static method</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">/**
* @param {HTMLElement} el
* @param {HTMLElement} el
* @return {Object}
* @return {Object}
@ -39,18 +39,18 @@ Each Component inherits, from the base one, a particular static method</p><div c
</code></pre></div><p>This method gives us the possibility to recognize and bind component types to each HTMLElement (div, img, iframe, etc.). Each HTML element introduced inside the canvas will be processed by <code>isComponent</code> of all available types and if it matches, the object represented the type should be returned. So, for example, with the image component this method looks like:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Image component</span>
</code></pre></div><p>This method gives us the possibility to recognize and bind component types to each HTMLElement (div, img, iframe, etc.). Each HTML element introduced inside the canvas will be processed by <code>isComponent</code> of all available types and if it matches, the object represented the type should be returned. For example, with the image component this method looks like:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Image component</span>
</code></pre></div><p>Let's try with something that might look a little bit tricky. What about a Google's Map?!? Google's maps are generally embedded as <code>iframe</code>s, but the template can be composed by a lot of different <code>iframe</code>s, how can I tell the editor that a particular iframe is actually a Google's Map. Well, this part is up to you to understand which is the right pattern to choose, you have the <code>HTMLElement</code> so you can make all checks you want and in this particular case this pattern is used:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Map component</span>
</code></pre></div><p>Let's try with something that might look a little bit tricky. What about a Google Map?!? Google Maps are generally embedded as <code>iframe</code>s, but the template can be composed by a lot of different <code>iframe</code>s. How can I tell the editor that a particular iframe is actually a Google's Map? Well, you'll have to figure out the right pattern, you have the <code>HTMLElement</code> so you can make all the checks you want. In this particular case this pattern is used:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Map component</span>
</code></pre></div><p>So, as you see, in addition to <code>tagName</code> check, we also used the <code>src</code> property, but, as you'll see, you can actually override it with your own logic by extending the built-in component.</p><h2id="define-new-component"><ahref="#define-new-component"aria-hidden="true"class="header-anchor">#</a> Define new Component</h2><p>Let's see now an example, with another HTML element, which is not handled by default Component types. What about <code>input</code> elements?</p><p>With the default GrapesJS configuration <code>input</code>s are treated just like any other element, you can move it around, style it, etc., but usually we'd like to handle this type of element more specifically. In this case, we have to create a new Component type.</p><p>Let's define just few specs for our new <em>Input</em> type:</p><ul><li>Can be dropped only inside <code>form</code> elements</li><li>Can't drop other elements inside it</li><li>Can change the type of the input (text, password, email, etc.)</li><li>Can make it required for the form</li></ul><p>To define a new Component type you need to choose from which built-in Component inherit its properties, in our case we just gonna choose the default one. Let's see a complete example of the new type definition</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Get DomComponents module</span>
</code></pre></div><p>In addition to <code>tagName</code> check, we also used the <code>src</code> property, but you can actually override it with your own logic by extending the built-in component.</p><h2id="define-new-component"><ahref="#define-new-component"aria-hidden="true"class="header-anchor">#</a> Define new Component</h2><p>Let's see an example with another HTML element that is not handled by default Component types. What about <code>input</code> elements?</p><p>With the default GrapesJS configuration <code>input</code>s are treated like any other element; you can move it around, style it, etc. However, we'd like to handle this type of element more specifically. In this case, we have to create a new Component type.</p><p>Let's define few specs for our new <em>Input</em> type:</p><ul><li>Can be dropped only inside <code>form</code> elements</li><li>Can't drop other elements inside it</li><li>Can change the type of the input (text, password, email, etc.)</li><li>Can make it required for the form</li></ul><p>To define a new Component type you need to choose from which built-in Component inherit its properties, in our case we just gonna choose the default one. Let's see a complete example of the new type definition</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token comment">// Get DomComponents module</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="active sidebar-link">Trait Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#built-in-trait-types"class="sidebar-link">Built-in trait types</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#add-traits-to-components"class="sidebar-link">Add Traits to Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#define-new-trait-type"class="sidebar-link">Define new Trait type</a></li></ul></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="trait-manager"><ahref="#trait-manager"aria-hidden="true"class="header-anchor">#</a> Trait Manager</h1><p>In GrapesJS, Traits could define different parameters and behaviors of a single component. The user generally will see traits as<em>Settings</em> of each component. A common use of traits is to customize element attributes (eg. <code>placeholder</code> for inputs) and in this case the editor comes already with some built-in, easy configurable, types.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-trait-types">Built-in trait types</a></li><li><ahref="#add-traits-to-components">Add Traits to Components</a></li><li><ahref="#define-new-trait-type">Define new Trait type</a></li></ul></div><p></p><h2id="built-in-trait-types"><ahref="#built-in-trait-types"aria-hidden="true"class="header-anchor">#</a> Built-in trait types</h2><ul><li>text</li><li>number</li><li>checkbox</li><li>select</li><li>color</li></ul><h2id="add-traits-to-components"><ahref="#add-traits-to-components"aria-hidden="true"class="header-anchor">#</a> Add Traits to Components</h2><p>You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:</p><imgsrc="/docs/default-traits.png"><p>In this case we gonna create a new Component (<ahref="Components">check here</a> for more details about the creation of new components) with a new set of traits</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="active sidebar-link">Trait Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#built-in-trait-types"class="sidebar-link">Built-in trait types</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#add-traits-to-components"class="sidebar-link">Add Traits to Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#define-new-trait-type"class="sidebar-link">Define new Trait type</a></li></ul></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="trait-manager"><ahref="#trait-manager"aria-hidden="true"class="header-anchor">#</a> Trait Manager</h1><p>In GrapesJS, Traits can define different parameters and behaviors of a component. The user generally will see traits as the<em>Settings</em> of a component. A common use of traits is to customize element attributes (eg. <code>placeholder</code> for inputs) and in this case the editor comes already with some built-in, easy configurable, types.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-trait-types">Built-in trait types</a></li><li><ahref="#add-traits-to-components">Add Traits to Components</a></li><li><ahref="#define-new-trait-type">Define new Trait type</a></li></ul></div><p></p><h2id="built-in-trait-types"><ahref="#built-in-trait-types"aria-hidden="true"class="header-anchor">#</a> Built-in trait types</h2><ul><li>text</li><li>number</li><li>checkbox</li><li>select</li><li>color</li></ul><h2id="add-traits-to-components"><ahref="#add-traits-to-components"aria-hidden="true"class="header-anchor">#</a> Add Traits to Components</h2><p>You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain two traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see this:</p><imgsrc="/docs/default-traits.png"><p>In this example we are going to create a new Component. (<ahref="Components">Check here</a> for more details about the creation of new components with a new set of traits</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Now the result will be</p><imgsrc="/docs/input-custom-traits.png"><p>By default, traits modify attributes of the model (which than reflected in canvas) but you can also have traits which change the property</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>Now the result will be</p><imgsrc="/docs/input-custom-traits.png"><p>Traits modify attributes of the model (which than reflected in canvas), but you can also have traits which change the property</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>In this way you're able to listen this changes and react with your own logic</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>DomComponents<spanclass="token punctuation">.</span><spanclass="token function">addType</span><spanclass="token punctuation">(</span><spanclass="token string">'input'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>In this way you're able to listen for changes and react with your own logic</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>DomComponents<spanclass="token punctuation">.</span><spanclass="token function">addType</span><spanclass="token punctuation">(</span><spanclass="token string">'input'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
Artur Arseniev
8 years ago