<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>There's nothing here.</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>How did we get here?</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="active sidebar-link">DOM Components</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#domcomponents"class="sidebar-link">DomComponents</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#load"class="sidebar-link">load</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#store"class="sidebar-link">store</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#getwrapper"class="sidebar-link">getWrapper</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#getcomponents"class="sidebar-link">getComponents</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#addcomponent"class="sidebar-link">addComponent</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#render"class="sidebar-link">render</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#clear"class="sidebar-link">clear</a></li></ul></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></div><divclass="page"><divclass="content"><h2id="domcomponents"><ahref="#domcomponents"aria-hidden="true"class="header-anchor">#</a> DomComponents</h2><p>With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="active sidebar-link">DOM Components</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#domcomponents"class="sidebar-link">DomComponents</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#load"class="sidebar-link">load</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#store"class="sidebar-link">store</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#getwrapper"class="sidebar-link">getWrapper</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#getcomponents"class="sidebar-link">getComponents</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#addcomponent"class="sidebar-link">addComponent</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#render"class="sidebar-link">render</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#clear"class="sidebar-link">clear</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#addtype"class="sidebar-link">addType</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#gettype"class="sidebar-link">getType</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/components.html#gettypes"class="sidebar-link">getTypes</a></li></ul></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></div><divclass="page"><divclass="content"><h2id="domcomponents"><ahref="#domcomponents"aria-hidden="true"class="header-anchor">#</a> DomComponents</h2><p>With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> domComponents <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>DomComponents<spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#getwrapper">getWrapper</a></li><li><ahref="#getcomponents">getComponents</a></li><li><ahref="#addcomponent">addComponent</a></li><li><ahref="#clear">clear</a></li><li><ahref="#load">load</a></li><li><ahref="#store">store</a></li><li><ahref="#render">render</a></li></ul><h2id="load"><ahref="#load"aria-hidden="true"class="header-anchor">#</a> load</h2><p>Load components from the passed object, if the object is empty will try to fetch them
</code></pre></div><ul><li><ahref="#getwrapper">getWrapper</a></li><li><ahref="#getcomponents">getComponents</a></li><li><ahref="#addcomponent">addComponent</a></li><li><ahref="#clear">clear</a></li><li><ahref="#load">load</a></li><li><ahref="#store">store</a></li><li><ahref="#addtype">addType</a></li><li><ahref="#gettype">getType</a></li><li><ahref="#gettypes">getTypes</a></li><li><ahref="#render">render</a></li></ul><h2id="load"><ahref="#load"aria-hidden="true"class="header-anchor">#</a> load</h2><p>Load components from the passed object, if the object is empty will try to fetch them
autonomously from the selected storage
The fetched data will be added to the collection</p><h3id="parameters"><ahref="#parameters"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>data</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Object of data to load (optional, default <code>''</code>)</li></ul><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Loaded data</p><h2id="store"><ahref="#store"aria-hidden="true"class="header-anchor">#</a> store</h2><p>Store components on the selected storage</p><h3id="parameters-2"><ahref="#parameters-2"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>noStore</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> If true, won't store</li></ul><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Data to store</p><h2id="getwrapper"><ahref="#getwrapper"aria-hidden="true"class="header-anchor">#</a> getWrapper</h2><p>Returns root component inside the canvas. Something like <code><body></code> inside HTML page
The wrapper doesn't differ from the original Component Model</p><h3id="examples"><ahref="#examples"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token comment">// Change background of the wrapper and set some attribute</span>
@ -77,13 +77,15 @@ as 'domComponents.getComponents().add(...)'</p><h3 id="parameters-3"><a href="#p
</code></pre></div><p>Returns <strong>(Component | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<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><Component>)</strong> Component/s added</p><h2id="render"><ahref="#render"aria-hidden="true"class="header-anchor">#</a> render</h2><p>Render and returns wrapper element with all components inside.
Once the wrapper is rendered, and it's what happens when you init the editor,
the all new components will be added automatically and property changes are all
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> styleManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>StyleManager<spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#getconfig">getConfig</a></li><li><ahref="#addsector">addSector</a></li><li><ahref="#getsector">getSector</a></li><li><ahref="#removesector">removeSector</a></li><li><ahref="#getsectors">getSectors</a></li><li><ahref="#addproperty">addProperty</a></li><li><ahref="#getproperty">getProperty</a></li><li><ahref="#removeproperty">removeProperty</a></li><li><ahref="#getproperties">getProperties</a></li><li><ahref="#getmodeltostyle">getModelToStyle</a></li><li><ahref="#getmodeltostyle">getModelToStyle</a></li><li><ahref="#addtype">addType</a></li><li><ahref="#gettype">getType</a></li><li><ahref="#gettypes">getTypes</a></li><li><ahref="#createtype">createType</a></li></ul><h2id="getconfig"><ahref="#getconfig"aria-hidden="true"class="header-anchor">#</a> getConfig</h2><p>Get configuration object</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2id="addsector"><ahref="#addsector"aria-hidden="true"class="header-anchor">#</a> addSector</h2><p>Add new sector to the collection. If the sector with the same id already exists,
</code></pre></div><ul><li><ahref="#getconfig">getConfig</a></li><li><ahref="#addsector">addSector</a></li><li><ahref="#getsector">getSector</a></li><li><ahref="#removesector">removeSector</a></li><li><ahref="#getsectors">getSectors</a></li><li><ahref="#addproperty">addProperty</a></li><li><ahref="#getproperty">getProperty</a></li><li><ahref="#removeproperty">removeProperty</a></li><li><ahref="#getproperties">getProperties</a></li><li><ahref="#getmodeltostyle">getModelToStyle</a></li><li><ahref="#addtype">addType</a></li><li><ahref="#gettype">getType</a></li><li><ahref="#gettypes">getTypes</a></li><li><ahref="#createtype">createType</a></li></ul><h2id="getconfig"><ahref="#getconfig"aria-hidden="true"class="header-anchor">#</a> getConfig</h2><p>Get configuration object</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2id="addsector"><ahref="#addsector"aria-hidden="true"class="header-anchor">#</a> addSector</h2><p>Add new sector to the collection. If the sector with the same id already exists,
that one will be returned</p><h3id="parameters"><ahref="#parameters"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Sector id</li><li><code>sector</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Object representing sector
@ -128,7 +128,7 @@ This isn't totally out of the ordinary, but the unique thing about Components th
<spanclass="token comment">// use `content` for static strings, `components` string will be parsed</span>
<spanclass="token comment">// and transformed in Components</span>
components<spanclass="token punctuation">:</span><spanclass="token string">'<span>HTML at some point</span>'</span><spanclass="token punctuation">,</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="active sidebar-link">Trait Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#built-in-trait-types"class="sidebar-link">Built-in trait types</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#add-traits-to-components"class="sidebar-link">Add Traits to Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#define-new-trait-type"class="sidebar-link">Define new Trait type</a></li></ul></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="trait-manager"><ahref="#trait-manager"aria-hidden="true"class="header-anchor">#</a> Trait Manager</h1><p>In GrapesJS, Traits can define different parameters and behaviors of a component. The user generally will see traits as the <em>Settings</em> of a component. A common use of traits is to customize element attributes (eg. <code>placeholder</code> for inputs) and in this case the editor comes already with some built-in, easy configurable, types.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-trait-types">Built-in trait types</a></li><li><ahref="#add-traits-to-components">Add Traits to Components</a></li><li><ahref="#define-new-trait-type">Define new Trait type</a></li></ul></div><p></p><h2id="built-in-trait-types"><ahref="#built-in-trait-types"aria-hidden="true"class="header-anchor">#</a> Built-in trait types</h2><ul><li>text</li><li>number</li><li>checkbox</li><li>select</li><li>color</li></ul><h2id="add-traits-to-components"><ahref="#add-traits-to-components"aria-hidden="true"class="header-anchor">#</a> Add Traits to Components</h2><p>You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain two traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see this:</p><imgsrc="/docs/default-traits.png"><p>In this example we are going to create a new Component. (<ahref="Components">Check here</a> for more details about the creation of new components with a new set of traits</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divclass="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="active sidebar-link">Trait Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#built-in-trait-types"class="sidebar-link">Built-in trait types</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#add-traits-to-components"class="sidebar-link">Add Traits to Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#define-new-trait-type"class="sidebar-link">Define new Trait type</a></li></ul></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="trait-manager"><ahref="#trait-manager"aria-hidden="true"class="header-anchor">#</a> Trait Manager</h1><p>In GrapesJS, Traits can define different parameters and behaviors of a component. The user generally will see traits as the <em>Settings</em> of a component. A common use of traits is to customize element attributes (eg. <code>placeholder</code> for inputs) and in this case the editor comes already with some built-in, easy configurable, types.</p><p></p><divclass="table-of-contents"><ul><li><ahref="#built-in-trait-types">Built-in trait types</a></li><li><ahref="#add-traits-to-components">Add Traits to Components</a></li><li><ahref="#define-new-trait-type">Define new Trait type</a></li></ul></div><p></p><h2id="built-in-trait-types"><ahref="#built-in-trait-types"aria-hidden="true"class="header-anchor">#</a> Built-in trait types</h2><ul><li>text</li><li>number</li><li>checkbox</li><li>select</li><li>color</li></ul><h2id="add-traits-to-components"><ahref="#add-traits-to-components"aria-hidden="true"class="header-anchor">#</a> Add Traits to Components</h2><p>You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain two traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see this:</p><imgsrc="/docs/default-traits.png"><p>In this example we are going to create a new Component. (<ahref="/docs/modules/Components.html">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