<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>
</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> keymaps <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Keymaps<spanclass="token punctuation">;</span>
@ -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="active sidebar-link">Block Manager</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Component Manager</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Trait Manager</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="block-manager"><ahref="#block-manager"aria-hidden="true"class="header-anchor">#</a> Block Manager</h1><palign="center"><imgsrc="http://grapesjs.com/img/sc-grapesjs-blocks-prp.jpg"alt="GrapesJS - Block Manager"height="400"align="center"></p><p>The Block is a group of <ahref="/docs/modules/Components.html">Components</a> and can be easily reused inside templates.</p><p>The difference between components and blocks: The component is more atomic, so a single image, a text box or a map is a component. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).</p><p>Check out the <ahref="/docs/modules/Components.html">Components</a> page to see the list of built-in components and how to create your own.</p><p>Let's see how to add a new block to the editor using the <ahref="/docs/api/block_manager.html">Blocks API</a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<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><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Blocks.html#custom-render"class="sidebar-link">Custom render</a></li></ul></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></p><divclass="table-of-contents"><ul><li><ahref="#custom-render">Custom render <spanclass="badge tip top">0.14.55+</span></a></li></ul></div><p></p><p>The Block is a group of <ahref="/docs/modules/Components.html">Components</a> and can be easily reused inside templates.</p><p>The difference between components and blocks: The component is more atomic, so a single image, a text box or a map is a component. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).</p><p>Check out the <ahref="/docs/modules/Components.html">Components</a> page to see the list of built-in components and how to create your own.</p><p>Let's see how to add a new block to the editor using the <ahref="/docs/api/block_manager.html">Blocks API</a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">var</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span><spanclass="token operator">...</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>In the example above you're defining a row component which will accept only elements which match '.row-cell' selector and cells which could be dragged only inside '.row' elements. We're also defining the custom name which will be seen inside the Layers panel.
If you want to check the complete list of available Component's properties, check directly the Component model source:
<ahref="https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js"target="_blank"rel="noopener noreferrer">https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h2id="custom-render"><ahref="#custom-render"aria-hidden="true"class="header-anchor">#</a> Custom render <spanclass="badge tip top">0.14.55+</span></h2><p>If you need to customize the aspect of each block you can pass a <code>render</code> callback function in the block definition. Let's see how it works.</p><p>As a first option, you can return a simple HTML string, which will be used as a new inner content of the block. As an argument of the callback you will get an object containing the following properties:</p><ul><li><code>model</code> - Block's model (so you can use any passed property to it)</li><li><code>el</code> - Current rendered HTMLElement of the block</li><li><code>className</code> - The base class name used for blocks (useful if you follow BEM, so you can create classes like <code>${className}__elem</code>)</li></ul><divclass="language-js extra-class"><preclass="language-js"><code>blockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'some-block-id'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><imgsrc="/docs/block-custom-render.jpg"><p>Another option would be to avoid returning from the callback (in that case nothing will be replaced) and edit only the current <code>el</code> block element</p><divclass="language-js extra-class"><preclass="language-js"><code>blockManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'some-block-id'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
<spanclass="token comment">// ...</span>
render<spanclass="token punctuation">:</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span> el <spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token operator">=></span><spanclass="token punctuation">{</span>
Artur Arseniev
8 years ago
