<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>That's a Four-Oh-Four.</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<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/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="getting-started"><ahref="#getting-started"aria-hidden="true"class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>path/to/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><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 page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>path/to/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/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="active sidebar-link"> - Component</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#component"class="sidebar-link">Component</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#is"class="sidebar-link">is</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#find"class="sidebar-link">find</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#closest"class="sidebar-link">closest</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#replacewith"class="sidebar-link">replaceWith</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#setattributes"class="sidebar-link">setAttributes</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#addattributes"class="sidebar-link">addAttributes</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#getstyle"class="sidebar-link">getStyle</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#setstyle"class="sidebar-link">setStyle</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#getattributes"class="sidebar-link">getAttributes</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#addclass"class="sidebar-link">addClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#setclass"class="sidebar-link">setClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#removeclass"class="sidebar-link">removeClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#append"class="sidebar-link">append</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#components"class="sidebar-link">components</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#parent"class="sidebar-link">parent</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#getname"class="sidebar-link">getName</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#geticon"class="sidebar-link">getIcon</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#tohtml"class="sidebar-link">toHTML</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#getid"class="sidebar-link">getId</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#setid"class="sidebar-link">setId</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#getel"class="sidebar-link">getEl</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#onall"class="sidebar-link">onAll</a></li></ul></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></div><divclass="page"><divclass="content"><h2id="component"><ahref="#component"aria-hidden="true"class="header-anchor">#</a> Component</h2><p>The Component object represents a single node of our template structure, so when you update its properties the changes are
<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="active sidebar-link"> - Component</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#component"class="sidebar-link">Component</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#is"class="sidebar-link">is</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#find"class="sidebar-link">find</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#closest"class="sidebar-link">closest</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#replacewith"class="sidebar-link">replaceWith</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#setattributes"class="sidebar-link">setAttributes</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#addattributes"class="sidebar-link">addAttributes</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#getstyle"class="sidebar-link">getStyle</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#setstyle"class="sidebar-link">setStyle</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#getattributes"class="sidebar-link">getAttributes</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#addclass"class="sidebar-link">addClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#setclass"class="sidebar-link">setClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#removeclass"class="sidebar-link">removeClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#append"class="sidebar-link">append</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#components"class="sidebar-link">components</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#parent"class="sidebar-link">parent</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#getname"class="sidebar-link">getName</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#geticon"class="sidebar-link">getIcon</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#tohtml"class="sidebar-link">toHTML</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#getid"class="sidebar-link">getId</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#setid"class="sidebar-link">setId</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#getel"class="sidebar-link">getEl</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#onall"class="sidebar-link">onAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/component.html#remove"class="sidebar-link">remove</a></li></ul></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></div><divclass="page"><divclass="content"><h2id="component"><ahref="#component"aria-hidden="true"class="header-anchor">#</a> Component</h2><p>The Component object represents a single node of our template structure, so when you update its properties the changes are
immediatly reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all
immediatly reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all
the tree of nodes).
the tree of nodes).
An example on how to update properties:</p><divclass="language-js extra-class"><preclass="language-js"><code>component<spanclass="token punctuation">.</span><spanclass="token keyword">set</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
An example on how to update properties:</p><divclass="language-js extra-class"><preclass="language-js"><code>component<spanclass="token punctuation">.</span><spanclass="token keyword">set</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{256:function(e,t,a){"use strict";a.r(t);varn=a(1),s=Object(n.a)({},function(){vare=this.$createElement,t=this._self._c||e;returnt("div",{staticClass:"content"},[this._m(0),t("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),t("router-link",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])},[function(){vare=this.$createElement,t=this._self._c||e;returnt("h1",{attrs:{id:"api-reference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api-reference","aria-hidden":"true"}},[this._v("#")]),this._v(" API Reference")])}],!1,null,null,null);s.options.__file="README.md";t.default=s.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{247:function(e,t,a){"use strict";a.r(t);varn=a(1),s=Object(n.a)({},function(){vare=this.$createElement,t=this._self._c||e;returnt("div",{staticClass:"content"},[this._m(0),t("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),t("router-link",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])},[function(){vare=this.$createElement,t=this._self._c||e;returnt("h1",{attrs:{id:"api-reference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api-reference","aria-hidden":"true"}},[this._v("#")]),this._v(" API Reference")])}],!1,null,null,null);s.options.__file="README.md";t.default=s.exports}}]);
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="active sidebar-link">Getting Started</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#import-the-library"class="sidebar-link">Import the library</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#start-from-the-canvas"class="sidebar-link">Start from the canvas</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#add-blocks"class="sidebar-link">Add Blocks</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#define-components"class="sidebar-link">Define Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#panels-buttons"class="sidebar-link">Panels & Buttons</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#layers"class="sidebar-link">Layers</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#style-manager"class="sidebar-link">Style Manager</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#traits"class="sidebar-link">Traits</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#responsive-templates"class="sidebar-link">Responsive templates</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#store-load-data"class="sidebar-link">Store & load data</a></li><liclass="sidebar-sub-header"><ahref="/docs/getting-started.html#theming"class="sidebar-link">Theming</a></li></ul></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="getting-started"><ahref="#getting-started"aria-hidden="true"class="header-anchor">#</a> Getting Started</h1><p>This guide is a step-by-step introduction for everyone who wants to start creating its own builder with GrapesJS. This is not a complete guide of all functionalities but just a concise overview of most common modules.
<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.
Let's see how to create a completely customized page builder from scratch. The last demo of this page represents the <ahref="#final-result">final result</a></p><h2id="import-the-library"><ahref="#import-the-library"aria-hidden="true"class="header-anchor">#</a> Import the library</h2><p>Before start using GrapesJS you have to import it inside your project, so let's import its latest version</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>//unpkg.com/grapesjs/dist/css/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
Let's see how to create a completely customized page builder from scratch. The last demo of this page represents the <ahref="#final-result">final result</a></p><h2id="import-the-library"><ahref="#import-the-library"aria-hidden="true"class="header-anchor">#</a> Import the library</h2><p>Before start using GrapesJS you have to import it inside your project, so let's import its latest version</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>//unpkg.com/grapesjs/dist/css/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="active sidebar-link">Replace Rich Text Editor</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#interface"class="sidebar-link">Interface</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#toolbar-position"class="sidebar-link">Toolbar position</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#the-built-in-vs-third-party"class="sidebar-link">The built-in vs third-party</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#plugins"class="sidebar-link">Plugins</a></li></ul></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="replace-the-built-in-rich-text-editor"><ahref="#replace-the-built-in-rich-text-editor"aria-hidden="true"class="header-anchor">#</a> Replace the built-in Rich Text Editor</h1><p>As you might have noticed the default Rich Text Editor (RTE) is really tiny and so doesn't seem like a complete solution as a text editor. Instead of showing how to add new commands inside the default one we'll show how to completely replace it with another one.</p><p>In the following guide we'll integrate the CKEditor and to accomplish this task we just need to provide few functions to the GrapesJS API method <code>setCustomRte</code> as an interface.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#interface">Interface</a><ul><li><ahref="#enable">Enable</a></li><li><ahref="#disable">Disable</a></li><li><ahref="#focus">Focus</a></li></ul></li><li><ahref="#toolbar-position">Toolbar position</a></li><li><ahref="#the-built-in-vs-third-party">The built-in vs third-party</a></li><li><ahref="#plugins">Plugins</a></li></ul></div><p></p><h2id="interface"><ahref="#interface"aria-hidden="true"class="header-anchor">#</a> Interface</h2><h3id="enable"><ahref="#enable"aria-hidden="true"class="header-anchor">#</a> Enable</h3><p>The first step is to indicate how to enable the third-party library and so for we gonna start with the <code>enable()</code> function. This method should take care of the first initialization of our custom RTE but also for the next time is called on the same element, this is why there is the <code>rte</code> argument.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="active sidebar-link">Replace Rich Text Editor</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#interface"class="sidebar-link">Interface</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#toolbar-position"class="sidebar-link">Toolbar position</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#the-built-in-vs-third-party"class="sidebar-link">The built-in vs third-party</a></li><liclass="sidebar-sub-header"><ahref="/docs/guides/Replace-Rich-Text-Editor.html#plugins"class="sidebar-link">Plugins</a></li></ul></li><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="replace-the-built-in-rich-text-editor"><ahref="#replace-the-built-in-rich-text-editor"aria-hidden="true"class="header-anchor">#</a> Replace the built-in Rich Text Editor</h1><p>As you might have noticed the default Rich Text Editor (RTE) is really tiny and so doesn't seem like a complete solution as a text editor. Instead of showing how to add new commands inside the default one we'll show how to completely replace it with another one.</p><p>In the following guide we'll integrate the CKEditor and to accomplish this task we just need to provide few functions to the GrapesJS API method <code>setCustomRte</code> as an interface.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#interface">Interface</a><ul><li><ahref="#enable">Enable</a></li><li><ahref="#disable">Disable</a></li><li><ahref="#focus">Focus</a></li></ul></li><li><ahref="#toolbar-position">Toolbar position</a></li><li><ahref="#the-built-in-vs-third-party">The built-in vs third-party</a></li><li><ahref="#plugins">Plugins</a></li></ul></div><p></p><h2id="interface"><ahref="#interface"aria-hidden="true"class="header-anchor">#</a> Interface</h2><h3id="enable"><ahref="#enable"aria-hidden="true"class="header-anchor">#</a> Enable</h3><p>The first step is to indicate how to enable the third-party library and so for we gonna start with the <code>enable()</code> function. This method should take care of the first initialization of our custom RTE but also for the next time is called on the same element, this is why there is the <code>rte</code> argument.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
@ -97,7 +97,10 @@ For example, when you create a link using the built-in RTE then you'll be able t
Obviously, each third-party library has its own APIs and can present some limitations and drawbacks, so, a minimal knowledge of the library is a plus.</p><h2id="plugins"><ahref="#plugins"aria-hidden="true"class="header-anchor">#</a> Plugins</h2><p>For the CKEditor, you can find a complete plugin here <ahref="https://github.com/artf/grapesjs-plugin-ckeditor"target="_blank"rel="noopener noreferrer">grapesjs-plugin-ckeditor<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></div><divclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/guides/Replace-Rich-Text-Editor.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">7/7/2018, 4:23:32 PM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
Obviously, each third-party library has its own APIs and can present some limitations and drawbacks, so, a minimal knowledge of the library is a plus.</p><h2id="plugins"><ahref="#plugins"aria-hidden="true"class="header-anchor">#</a> Plugins</h2><p>For the CKEditor, you can find a complete plugin here <ahref="https://github.com/artf/grapesjs-plugin-ckeditor"target="_blank"rel="noopener noreferrer">grapesjs-plugin-ckeditor<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></div><divclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/guides/Replace-Rich-Text-Editor.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">7/7/2018, 4:23:32 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></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, 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>
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">7/12/2018, 6:13:47 PM</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">9/17/2018, 3:16:58 AM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="active sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="block-manager"><ahref="#block-manager"aria-hidden="true"class="header-anchor">#</a> Block Manager</h1><palign="center"><imgsrc="http://grapesjs.com/img/sc-grapesjs-blocks-prp.jpg"alt="GrapesJS - Block Manager"height="400"align="center"></p><p>The Block is a group of <ahref="Components">Components</a> and can be easily reused inside templates.</p><p>To better understand the difference between components and blocks, the component is more atomic so, for example, a single image, a text box or a map fits perfectly in this concept. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).</p><p>Check <ahref="Components">Components</a> page to see the list of built-in components and how to create your own.</p><p>Let's see how to add a new block to the editor using the <ahref="API-Block-Manager">Blocks API</a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="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="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="active sidebar-link">Components & JS</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#basic-scripts"class="sidebar-link">Basic scripts</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#dependencies"class="sidebar-link">Dependencies</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components-js.html#examples"class="sidebar-link">Examples</a></li></ul></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="components-js"><ahref="#components-js"aria-hidden="true"class="header-anchor">#</a> Components & JS</h1><p>In this guide you'll see how to attach component related scripts and deal with external javascript libraries (for stuff like counters, galleries, slideshows, etc.)</p><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-scripts">Basic scripts</a></li><li><ahref="#dependencies">Dependencies</a><ul><li><ahref="#component-related">Component related</a></li><li><ahref="#template-related">Template related</a></li></ul></li><li><ahref="#examples">Examples</a></li></ul></div><p></p><h2id="basic-scripts"><ahref="#basic-scripts"aria-hidden="true"class="header-anchor">#</a> Basic scripts</h2><p>Let's see how to create a component with scripts using Blocks.</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'test-block'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="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="active sidebar-link">Component Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#built-in-components"class="sidebar-link">Built-in components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#how-components-work"class="sidebar-link">How Components work?</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#component-recognition"class="sidebar-link">Component recognition</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#define-new-component"class="sidebar-link">Define new Component</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#update-component-type"class="sidebar-link">Update Component type</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#components-js"class="sidebar-link">Components & JS</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Components.html#hints"class="sidebar-link">Hints</a></li></ul></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="component-manager"><ahref="#component-manager"aria-hidden="true"class="header-anchor">#</a> Component Manager</h1><p>The Component is the base element for the template composition and, usually, elements like images, text boxes, maps, etc. fit perfectly in this concept. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-components">Built-in components</a></li><li><ahref="#how-components-work">How Components work?</a></li><li><ahref="#component-recognition">Component recognition</a></li><li><ahref="#define-new-component">Define new Component</a></li><li><ahref="#update-component-type">Update Component type</a></li><li><ahref="#components-js">Components & JS</a></li><li><ahref="#hints">Hints</a></li></ul></div><p></p><h2id="built-in-components"><ahref="#built-in-components"aria-hidden="true"class="header-anchor">#</a> Built-in components</h2><ul><li>Default (Basic)</li><li>Text</li><li>Image</li><li>Video</li><li>Link</li><li>Map</li><li>Table</li><li>Row (for the table)</li><li>Cell (for the table)</li></ul><h2id="how-components-work"><ahref="#how-components-work"aria-hidden="true"class="header-anchor">#</a> How Components work?</h2><p>When we pass an HTML string to the editor like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>div</span><spanclass="token punctuation">></span></span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="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="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="active sidebar-link">Plugins</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#basic-plugin"class="sidebar-link">Basic plugin</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#named-plugin"class="sidebar-link">Named plugin</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#plugins-with-options"class="sidebar-link">Plugins with options</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#named-plugins-vs-non-named-plugins"class="sidebar-link">Named Plugins vs Non-Named Plugins</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#boilerplate"class="sidebar-link">Boilerplate</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#popular-plugins"class="sidebar-link">Popular Plugins</a></li></ul></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="plugins"><ahref="#plugins"aria-hidden="true"class="header-anchor">#</a> Plugins</h1><p>Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-plugin">Basic plugin</a></li><li><ahref="#named-plugin">Named plugin</a></li><li><ahref="#plugins-with-options">Plugins with options</a></li><li><ahref="#named-plugins-vs-non-named-plugins">Named Plugins vs Non-Named Plugins</a></li><li><ahref="#boilerplate">Boilerplate</a></li><li><ahref="#popular-plugins">Popular Plugins</a></li></ul></div><p></p><h2id="basic-plugin"><ahref="#basic-plugin"aria-hidden="true"class="header-anchor">#</a> Basic plugin</h2><p>The most simple plugins are just functions that are run when the editor is being built.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">function</span><spanclass="token function">myPlugin</span><spanclass="token punctuation">(</span>editor<spanclass="token punctuation">)</span><spanclass="token punctuation">{</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="active sidebar-link">Plugins</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#basic-plugin"class="sidebar-link">Basic plugin</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#named-plugin"class="sidebar-link">Named plugin</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#plugins-with-options"class="sidebar-link">Plugins with options</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#named-plugins-vs-non-named-plugins"class="sidebar-link">Named Plugins vs Non-Named Plugins</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#boilerplate"class="sidebar-link">Boilerplate</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Plugins.html#popular-plugins"class="sidebar-link">Popular Plugins</a></li></ul></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><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="plugins"><ahref="#plugins"aria-hidden="true"class="header-anchor">#</a> Plugins</h1><p>Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-plugin">Basic plugin</a></li><li><ahref="#named-plugin">Named plugin</a></li><li><ahref="#plugins-with-options">Plugins with options</a></li><li><ahref="#named-plugins-vs-non-named-plugins">Named Plugins vs Non-Named Plugins</a></li><li><ahref="#boilerplate">Boilerplate</a></li><li><ahref="#popular-plugins">Popular Plugins</a></li></ul></div><p></p><h2id="basic-plugin"><ahref="#basic-plugin"aria-hidden="true"class="header-anchor">#</a> Basic plugin</h2><p>The most simple plugins are just functions that are run when the editor is being built.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">function</span><spanclass="token function">myPlugin</span><spanclass="token punctuation">(</span>editor<spanclass="token punctuation">)</span><spanclass="token punctuation">{</span>
content<spanclass="token punctuation">:</span><spanclass="token string">'<div class="my-block">This is a simple block</div>'</span><spanclass="token punctuation">,</span>
content<spanclass="token punctuation">:</span><spanclass="token string">'<div class="my-block">This is a simple block</div>'</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="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="active sidebar-link">Storage Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#basic-configuration"class="sidebar-link">Basic configuration</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#setup-remote-storage"class="sidebar-link">Setup remote storage</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#store-and-load-templates"class="sidebar-link">Store and load templates</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#setup-the-server"class="sidebar-link">Setup the server</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#storage-api"class="sidebar-link">Storage API</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#events"class="sidebar-link">Events</a></li></ul></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="storage-manager"><ahref="#storage-manager"aria-hidden="true"class="header-anchor">#</a> Storage Manager</h1><p>The aim of this guide is to show how to setup correctly your storage configuration for common usages of the editor and explain also some additional advanced settings</p><divclass="warning custom-block"><pclass="custom-block-title">WARNING</p><p>This guide requires GrapesJS v0.14.15 or higher</p></div><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-configuration">Basic configuration</a></li><li><ahref="#setup-remote-storage">Setup remote storage</a></li><li><ahref="#store-and-load-templates">Store and load templates</a></li><li><ahref="#setup-the-server">Setup the server</a></li><li><ahref="#storage-api">Storage API</a><ul><li><ahref="#define-new-storage">Define new storage</a></li><li><ahref="#extend-storage">Extend storage</a></li><li><ahref="#examples">Examples</a></li></ul></li><li><ahref="#events">Events</a></li></ul></div><p></p><h2id="basic-configuration"><ahref="#basic-configuration"aria-hidden="true"class="header-anchor">#</a> Basic configuration</h2><p>The storage manager is a built-in module implemented inside GrapesJS which allows the persistence of your data. By default, GrapesJS saves the data locally by using the built-in <code>LocalStorage</code> which just leverages <ahref="https://developer.mozilla.org/it/docs/Web/API/Window/localStorage"target="_blank"rel="noopener noreferrer">localStorage API<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="active sidebar-link">Storage Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#basic-configuration"class="sidebar-link">Basic configuration</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#setup-remote-storage"class="sidebar-link">Setup remote storage</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#store-and-load-templates"class="sidebar-link">Store and load templates</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#setup-the-server"class="sidebar-link">Setup the server</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#storage-api"class="sidebar-link">Storage API</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Storage.html#events"class="sidebar-link">Events</a></li></ul></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><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="storage-manager"><ahref="#storage-manager"aria-hidden="true"class="header-anchor">#</a> Storage Manager</h1><p>The aim of this guide is to show how to setup correctly your storage configuration for common usages of the editor and explain also some additional advanced settings</p><divclass="warning custom-block"><pclass="custom-block-title">WARNING</p><p>This guide requires GrapesJS v0.14.15 or higher</p></div><p></p><divclass="table-of-contents"><ul><li><ahref="#basic-configuration">Basic configuration</a></li><li><ahref="#setup-remote-storage">Setup remote storage</a></li><li><ahref="#store-and-load-templates">Store and load templates</a></li><li><ahref="#setup-the-server">Setup the server</a></li><li><ahref="#storage-api">Storage API</a><ul><li><ahref="#define-new-storage">Define new storage</a></li><li><ahref="#extend-storage">Extend storage</a></li><li><ahref="#examples">Examples</a></li></ul></li><li><ahref="#events">Events</a></li></ul></div><p></p><h2id="basic-configuration"><ahref="#basic-configuration"aria-hidden="true"class="header-anchor">#</a> Basic configuration</h2><p>The storage manager is a built-in module implemented inside GrapesJS which allows the persistence of your data. By default, GrapesJS saves the data locally by using the built-in <code>LocalStorage</code> which just leverages <ahref="https://developer.mozilla.org/it/docs/Web/API/Window/localStorage"target="_blank"rel="noopener noreferrer">localStorage API<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.
You can initialize the editor with different storage configurations via <code>storageManager</code> option:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
You can initialize the editor with different storage configurations via <code>storageManager</code> option:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="active sidebar-link">Trait Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#built-in-trait-types"class="sidebar-link">Built-in trait types</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#add-traits-to-components"class="sidebar-link">Add Traits to Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#define-new-trait-type"class="sidebar-link">Define new Trait type</a></li></ul></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="trait-manager"><ahref="#trait-manager"aria-hidden="true"class="header-anchor">#</a> Trait Manager</h1><p>In GrapesJS, Traits could define different parameters and behaviors of a single component. The user generally will see traits as <em>Settings</em> of each component. A common use of traits is to customize element attributes (eg. <code>placeholder</code> for inputs) and in this case the editor comes already with some built-in, easy configurable, types.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-trait-types">Built-in trait types</a></li><li><ahref="#add-traits-to-components">Add Traits to Components</a></li><li><ahref="#define-new-trait-type">Define new Trait type</a></li></ul></div><p></p><h2id="built-in-trait-types"><ahref="#built-in-trait-types"aria-hidden="true"class="header-anchor">#</a> Built-in trait types</h2><ul><li>text</li><li>number</li><li>checkbox</li><li>select</li><li>color</li></ul><h2id="add-traits-to-components"><ahref="#add-traits-to-components"aria-hidden="true"class="header-anchor">#</a> Add Traits to Components</h2><p>You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:</p><imgsrc="/docs/default-traits.png"><p>In this case we gonna create a new Component (<ahref="Components">check here</a> for more details about the creation of new components) with a new set of traits</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<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>
Artur Arseniev
8 years ago
