mirror of https://github.com/artf/grapesjs.git
nocodeframeworkdrag-and-dropsite-buildersite-generatortemplate-builderui-builderweb-builderweb-builder-frameworkwebsite-builderno-codepage-builder
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
235 lines
53 KiB
235 lines
53 KiB
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Block Manager | GrapesJS</title>
|
|
<meta name="generator" content="VuePress 1.9.10">
|
|
<link rel="icon" href="/docs/logo-icon.png">
|
|
<link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.21.10">
|
|
<script src="https://grapesjs.com/js/grapes.min.js?v0.21.10"></script>
|
|
<meta name="description" content="GrapesJS documentation">
|
|
|
|
<link rel="preload" href="/docs/assets/css/0.styles.c7ff573f.css" as="style"><link rel="preload" href="/docs/assets/js/app.7cba500a.js" as="script"><link rel="preload" href="/docs/assets/js/4.0070552e.js" as="script"><link rel="preload" href="/docs/assets/js/2.6fefd022.js" as="script"><link rel="preload" href="/docs/assets/js/1.d23e9fed.js" as="script"><link rel="preload" href="/docs/assets/js/81.a3f44150.js" as="script"><link rel="preload" href="/docs/assets/js/33.a739af41.js" as="script"><link rel="prefetch" href="/docs/assets/js/12.fcd6c1b3.js"><link rel="prefetch" href="/docs/assets/js/13.f8ba6288.js"><link rel="prefetch" href="/docs/assets/js/14.37d1e434.js"><link rel="prefetch" href="/docs/assets/js/15.6e77df13.js"><link rel="prefetch" href="/docs/assets/js/16.c5f433ca.js"><link rel="prefetch" href="/docs/assets/js/17.de56d7c2.js"><link rel="prefetch" href="/docs/assets/js/18.bf39ac98.js"><link rel="prefetch" href="/docs/assets/js/19.ca87c57f.js"><link rel="prefetch" href="/docs/assets/js/20.68039d84.js"><link rel="prefetch" href="/docs/assets/js/21.2b429912.js"><link rel="prefetch" href="/docs/assets/js/22.27b0a8c5.js"><link rel="prefetch" href="/docs/assets/js/23.a6d68e8d.js"><link rel="prefetch" href="/docs/assets/js/24.74960541.js"><link rel="prefetch" href="/docs/assets/js/25.ca71342f.js"><link rel="prefetch" href="/docs/assets/js/26.33a13a48.js"><link rel="prefetch" href="/docs/assets/js/27.54f6b393.js"><link rel="prefetch" href="/docs/assets/js/28.cf1f128d.js"><link rel="prefetch" href="/docs/assets/js/29.5888c207.js"><link rel="prefetch" href="/docs/assets/js/3.4e94790f.js"><link rel="prefetch" href="/docs/assets/js/30.bace5f23.js"><link rel="prefetch" href="/docs/assets/js/31.2b0fa15d.js"><link rel="prefetch" href="/docs/assets/js/32.fdf463ac.js"><link rel="prefetch" href="/docs/assets/js/34.27801365.js"><link rel="prefetch" href="/docs/assets/js/35.55be1c25.js"><link rel="prefetch" href="/docs/assets/js/36.78a4b7a9.js"><link rel="prefetch" href="/docs/assets/js/37.a1d1286c.js"><link rel="prefetch" href="/docs/assets/js/38.7f94984b.js"><link rel="prefetch" href="/docs/assets/js/39.bae8130f.js"><link rel="prefetch" href="/docs/assets/js/40.d641c435.js"><link rel="prefetch" href="/docs/assets/js/41.2f0da2d4.js"><link rel="prefetch" href="/docs/assets/js/42.a0743242.js"><link rel="prefetch" href="/docs/assets/js/43.8460a28b.js"><link rel="prefetch" href="/docs/assets/js/44.943c0253.js"><link rel="prefetch" href="/docs/assets/js/45.aafa45da.js"><link rel="prefetch" href="/docs/assets/js/46.ad246b82.js"><link rel="prefetch" href="/docs/assets/js/47.b412adfe.js"><link rel="prefetch" href="/docs/assets/js/48.af9cac86.js"><link rel="prefetch" href="/docs/assets/js/49.86ad40ac.js"><link rel="prefetch" href="/docs/assets/js/5.08dc74a9.js"><link rel="prefetch" href="/docs/assets/js/50.f7509701.js"><link rel="prefetch" href="/docs/assets/js/51.8c42f1c6.js"><link rel="prefetch" href="/docs/assets/js/52.82b56909.js"><link rel="prefetch" href="/docs/assets/js/53.5f6601a1.js"><link rel="prefetch" href="/docs/assets/js/54.e8a69f95.js"><link rel="prefetch" href="/docs/assets/js/55.22891dc5.js"><link rel="prefetch" href="/docs/assets/js/56.f7e9921e.js"><link rel="prefetch" href="/docs/assets/js/57.578f14f1.js"><link rel="prefetch" href="/docs/assets/js/58.64b9e09c.js"><link rel="prefetch" href="/docs/assets/js/59.135e8739.js"><link rel="prefetch" href="/docs/assets/js/6.3a6e1ed3.js"><link rel="prefetch" href="/docs/assets/js/60.c21dfd9f.js"><link rel="prefetch" href="/docs/assets/js/61.c49c5b1e.js"><link rel="prefetch" href="/docs/assets/js/62.ce5bed3d.js"><link rel="prefetch" href="/docs/assets/js/63.3ee6f39c.js"><link rel="prefetch" href="/docs/assets/js/64.b439d27f.js"><link rel="prefetch" href="/docs/assets/js/65.ee472a88.js"><link rel="prefetch" href="/docs/assets/js/66.becd0d7a.js"><link rel="prefetch" href="/docs/assets/js/67.166cf34e.js"><link rel="prefetch" href="/docs/assets/js/68.36615226.js"><link rel="prefetch" href="/docs/assets/js/69.9a5913c7.js"><link rel="prefetch" href="/docs/assets/js/7.b99a3113.js"><link rel="prefetch" href="/docs/assets/js/70.8663a867.js"><link rel="prefetch" href="/docs/assets/js/71.8b580dcf.js"><link rel="prefetch" href="/docs/assets/js/72.355b7953.js"><link rel="prefetch" href="/docs/assets/js/73.b9ad99cd.js"><link rel="prefetch" href="/docs/assets/js/74.517d9902.js"><link rel="prefetch" href="/docs/assets/js/75.183f30c2.js"><link rel="prefetch" href="/docs/assets/js/76.894100bc.js"><link rel="prefetch" href="/docs/assets/js/77.a896626f.js"><link rel="prefetch" href="/docs/assets/js/78.a8d38215.js"><link rel="prefetch" href="/docs/assets/js/79.d0ad637c.js"><link rel="prefetch" href="/docs/assets/js/8.c0e09a5e.js"><link rel="prefetch" href="/docs/assets/js/80.43bf5b47.js"><link rel="prefetch" href="/docs/assets/js/82.514bee1c.js"><link rel="prefetch" href="/docs/assets/js/83.288e8f5d.js"><link rel="prefetch" href="/docs/assets/js/84.76c28d97.js"><link rel="prefetch" href="/docs/assets/js/85.c70a27f1.js"><link rel="prefetch" href="/docs/assets/js/86.d1d289b7.js"><link rel="prefetch" href="/docs/assets/js/87.bced23ab.js"><link rel="prefetch" href="/docs/assets/js/88.f0049b73.js"><link rel="prefetch" href="/docs/assets/js/89.c2ba01c2.js"><link rel="prefetch" href="/docs/assets/js/9.6121e0b4.js"><link rel="prefetch" href="/docs/assets/js/90.529090e5.js"><link rel="prefetch" href="/docs/assets/js/91.dd59134d.js"><link rel="prefetch" href="/docs/assets/js/92.d3e7c08c.js"><link rel="prefetch" href="/docs/assets/js/93.a12b0826.js"><link rel="prefetch" href="/docs/assets/js/94.036e5ed0.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.0da9b1d4.js">
|
|
<link rel="stylesheet" href="/docs/assets/css/0.styles.c7ff573f.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" alt="GrapesJS" class="logo"> <span class="site-name can-hide">GrapesJS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="native-carbon" class="carbon-ads"></div> <ul class="sidebar-links"><li><a href="/docs/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Modules</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/modules/Components.html" class="sidebar-link">Components</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components & JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Traits</a></li><li><a href="/docs/modules/Blocks.html" aria-current="page" class="active sidebar-link">Blocks</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Blocks.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Blocks.html#initialization" class="sidebar-link">Initialization</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Blocks.html#block-content-types" class="sidebar-link">Block content types</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Blocks.html#important-caveats" class="sidebar-link">Important caveats</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Blocks.html#programmatic-usage" class="sidebar-link">Programmatic usage</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Blocks.html#customization" class="sidebar-link">Customization</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Blocks.html#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/modules/I18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/modules/Selectors.html" class="sidebar-link">Selectors</a></li><li><a href="/docs/modules/Layers.html" class="sidebar-link">Layers</a></li><li><a href="/docs/modules/Pages.html" class="sidebar-link">Pages</a></li><li><a href="/docs/modules/Style-manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/modules/Storage.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/modules/Modal.html" class="sidebar-link">Modal</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Guides</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="block-manager"><a href="#block-manager" class="header-anchor">#</a> Block Manager</h1> <p align="center"><img src="http://grapesjs.com/img/sc-grapesjs-blocks-prp.jpg" alt="GrapesJS - Block Manager" height="400" align="center"></p> <p>A <a href="/docs/api/block.html">Block</a> is a simple object which allows the end-user to reuse your <a href="/docs/modules/Components.html">Components</a>. It can be connected to a single <a href="/docs/api/component.html">Component</a> or to a complex composition of them. In this guide, you will see how to setup and take full advantage of the built-in Block Manager UI in GrapesJS.
|
|
The default UI is a lightweight component with built-in Drag & Drop support, but as you'll see next in this guide, it's easy to extend and create your own UI manager.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>To get a better understanding of the content in this guide, we recommend reading <a href="/docs/modules/Components.html">Components</a> first</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>This guide is referring to GrapesJS v0.17.27 or higher</p></div> <p></p><div class="table-of-contents"><ul><li><a href="#configuration">Configuration</a></li><li><a href="#initialization">Initialization</a></li><li><a href="#block-content-types">Block content types</a><ul><li><a href="#component-oriented">Component-oriented</a></li><li><a href="#html-strings">HTML strings</a></li><li><a href="#mixed">Mixed</a></li></ul></li><li><a href="#important-caveats">Important caveats</a><ul><li><a href="#avoid-non-serializable-properties">Avoid non serializable properties</a></li><li><a href="#avoid-styles">Avoid styles</a></li></ul></li><li><a href="#programmatic-usage">Programmatic usage</a></li><li><a href="#customization">Customization</a></li><li><a href="#events">Events</a></li></ul></div><p></p> <h2 id="configuration"><a href="#configuration" class="header-anchor">#</a> Configuration</h2> <p>To change the default configurations you have to pass the <code>blockManager</code> property with the main configuration object.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">blockManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">blocks</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Check the full list of available options here: <a href="https://github.com/GrapesJS/grapesjs/blob/master/src/block_manager/config/config.ts" target="_blank" rel="noopener noreferrer">Block Manager Config<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="initialization"><a href="#initialization" class="header-anchor">#</a> Initialization</h2> <p>By default, Block Manager UI is considered a hidden component. Currently, the GrapesJS core, renders default panels and buttons that allow you to show them, but in long term, this is something that might will change. Here below you can see how to init the editor without default panels and immediately rendered Block Manager UI.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Follow the <a href="/docs/getting-started.html">Getting Started</a> guide in order to setup properly the editor with custom panels.</p></div> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// Avoid default panels</span>
|
|
<span class="token literal-property property">blockManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">appendTo</span><span class="token operator">:</span> <span class="token string">'.myblocks'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">blocks</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Image'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">media</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
|
|
<path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" />
|
|
</svg></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Use `image` component</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'image'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// The component `image` is activatable (shows the Asset Manager).</span>
|
|
<span class="token comment">// We want to activate it once dropped in the canvas.</span>
|
|
<span class="token literal-property property">activate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// select: true, // Default with `activate: true`</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="block-content-types"><a href="#block-content-types" class="header-anchor">#</a> Block content types</h2> <p>The key of connecting blocks to components is the <code>block.content</code> property and what we passed in the example above is the <a href="/docs/modules/Components.html#component-definition">Component Definition</a>. This is the component-oriented way to create blocks and this is how we highly recommend the creation of your blocks.</p> <h3 id="component-oriented"><a href="#component-oriented" class="header-anchor">#</a> Component-oriented</h3> <p>The <code>content</code> can accept different formats, like an HTML string (which will be parsed and converted to components), but the component-oriented approach is the most precise as you can keep the control of your each dropped block in the canvas. Another advice is to keep your blocks' <a href="/docs/modules/Components.html#component-definition">Component Definition</a> as light as possible, if you're defining a lot of redundant properties, probably it makes sense to create another dedicated component, this might reduce the size of your project JSON file. Here an example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Your components</span>
|
|
editor<span class="token punctuation">.</span>Components<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'my-cmp'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">model</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">prop1</span><span class="token operator">:</span> <span class="token string">'value1'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">prop2</span><span class="token operator">:</span> <span class="token string">'value2'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Your blocks</span>
|
|
<span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span> <span class="token operator">...</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'my-cmp'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop1</span><span class="token operator">:</span> <span class="token string">'value1-EXT'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop2</span><span class="token operator">:</span> <span class="token string">'value2-EXT'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
|
|
<span class="token punctuation">{</span> <span class="token operator">...</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'my-cmp'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop1</span><span class="token operator">:</span> <span class="token string">'value1-EXT'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop2</span><span class="token operator">:</span> <span class="token string">'value2-EXT'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
|
|
<span class="token punctuation">{</span> <span class="token operator">...</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'my-cmp'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop1</span><span class="token operator">:</span> <span class="token string">'value1-EXT'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop2</span><span class="token operator">:</span> <span class="token string">'value2-EXT'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
|
|
<span class="token punctuation">]</span>
|
|
</code></pre></div><p>Here we're reusing the same component multiple times with the same set of properties (just an example, makes more sense with composed content of components), this can be reduced to something like this.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Your components</span>
|
|
editor<span class="token punctuation">.</span>Components<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'my-cmp'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
editor<span class="token punctuation">.</span>Components<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'my-cmp-alt'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token string">'my-cmp'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">model</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">prop1</span><span class="token operator">:</span> <span class="token string">'value1-EXT'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">prop2</span><span class="token operator">:</span> <span class="token string">'value2-EXT'</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Your blocks</span>
|
|
<span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span> <span class="token operator">...</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'my-cmp-alt'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
|
|
<span class="token punctuation">{</span> <span class="token operator">...</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'my-cmp-alt'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
|
|
<span class="token punctuation">{</span> <span class="token operator">...</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'my-cmp-alt'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
|
|
<span class="token punctuation">]</span>
|
|
</code></pre></div><h3 id="html-strings"><a href="#html-strings" class="header-anchor">#</a> HTML strings</h3> <p>Using HTML strings as <code>content</code> is not wrong, in some cases you don't need the finest control over components and want to leave the user full freedom on template composition (eg. static site builder editor with HTML copy-pasted from a framework like <a href="https://tailwindcomponents.com/" target="_blank" rel="noopener noreferrer">Tailwind Components<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></a>)</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Your block</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="el-X">
|
|
<div class="el-Y el-A">Element A</div>
|
|
<div class="el-Y el-B">Element B</div>
|
|
<div class="el-Y el-C">Element C</div>
|
|
</div></span><span class="token template-punctuation string">`</span></span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>In such a case, all rendered elements will be converted to the best suited default component (eg. <code>.el-Y</code> elements will be treated like <code>text</code> components). The user will be able to style and drag them with no particular restrictions.</p> <p>Thanks to Components' <a href="/docs/modules/Components.html#iscomponent">isComponet</a> feature (executed post parsing), you're still able to bind your rendered elements to components and enforce an extra logic. Here an example how you would enforce all <code>.el-Y</code> elements to be placed only inside <code>.el-X</code> one, without touching any part of the original HTML used in the <code>content</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Your component</span>
|
|
editor<span class="token punctuation">.</span>Components<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'cmp-Y'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// Detect '.el-Y' elements</span>
|
|
<span class="token function-variable function">isComponent</span><span class="token operator">:</span> <span class="token parameter">el</span> <span class="token operator">=></span> el<span class="token punctuation">.</span>classList<span class="token operator">?.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">'el-Y'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">model</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Component Y'</span><span class="token punctuation">,</span> <span class="token comment">// Simple custom name</span>
|
|
<span class="token literal-property property">draggable</span><span class="token operator">:</span> <span class="token string">'.el-X'</span><span class="token punctuation">,</span> <span class="token comment">// Add `draggable` logic</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Another alternative is to leverage <code>data-gjs-*</code> attributes to attach properties to components.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>You can use most of the available <a href="/docs/api/component.html#properties">Component properties</a>.</p></div> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// -- [Option 1]: Declare type in HTML strings --</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="el-X">
|
|
<div data-gjs-type="cmp-Y" class="el-Y el-A">Element A</div>
|
|
<div data-gjs-type="cmp-Y" class="el-Y el-B">Element B</div>
|
|
<div data-gjs-type="cmp-Y" class="el-Y el-C">Element C</div>
|
|
</div></span><span class="token template-punctuation string">`</span></span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token comment">// Component</span>
|
|
editor<span class="token punctuation">.</span>Components<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'cmp-Y'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// You don't need `isComponent` anymore as you declare types already on elements</span>
|
|
<span class="token literal-property property">model</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Component Y'</span><span class="token punctuation">,</span> <span class="token comment">// Simple custom name</span>
|
|
<span class="token literal-property property">draggable</span><span class="token operator">:</span> <span class="token string">'.el-X'</span><span class="token punctuation">,</span> <span class="token comment">// Add `draggable` logic</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// -- [Option 2]: Declare properties in HTML strings (less recommended option) --</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="el-X">
|
|
<div data-gjs-name="Component Y" data-gjs-draggable=".el-X" class="el-Y el-A">Element A</div>
|
|
<div data-gjs-name="Component Y" data-gjs-draggable=".el-X" class="el-Y el-B">Element B</div>
|
|
<div data-gjs-name="Component Y" data-gjs-draggable=".el-X" class="el-Y el-C">Element C</div>
|
|
</div></span><span class="token template-punctuation string">`</span></span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token comment">// No need for a custom component.</span>
|
|
<span class="token comment">// You're already defining properties of each element.</span>
|
|
</code></pre></div><p>Here we showed all the possibilities you have with HTML strings, but we strongly advise against the abuse of the <code>Option 2</code> and to stick to a more component-oriented approach.
|
|
Without a proper component type, not only your HTML will be harder to read, but all those defined properties will be "hard-coded" to a generic component of those elements. So, if one day you decide to "upgrade" the logic of the component (eg. <code>draggable: '.el-X'</code> -> <code>draggable: '.el-X, .el-Z'</code>), you won't be able.</p> <h3 id="mixed"><a href="#mixed" class="header-anchor">#</a> Mixed</h3> <p>It's also possible to mix components with HTML strings by passing an array.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token comment">// Options like `activate`/`select` will be triggered only on the first component.</span>
|
|
<span class="token literal-property property">activate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'image'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div>Extra</div></span><span class="token template-punctuation string">`</span></span>
|
|
<span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><h2 id="important-caveats"><a href="#important-caveats" class="header-anchor">#</a> Important caveats</h2> <div class="custom-block danger"><p class="custom-block-title">Read carefully</p> <p></p></div> <h3 id="avoid-non-serializable-properties"><a href="#avoid-non-serializable-properties" class="header-anchor">#</a> Avoid non serializable properties</h3> <p>Don't put non serializable properties, like functions, in your blocks, keep them only in your components.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Your block</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'my-cmp'</span><span class="token punctuation">,</span>
|
|
<span class="token function">script</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>This will work, but if you try to save and reload a stored project, those will disappear.</p> <h3 id="avoid-styles"><a href="#avoid-styles" class="header-anchor">#</a> Avoid styles</h3> <p>Don't put styles in your blocks, keep them always in your components.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Your block</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token comment">// BAD: You risk to create conflicting styles</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'my-cmp'</span><span class="token punctuation">,</span> <span class="token literal-property property">styles</span><span class="token operator">:</span> <span class="token string">'.cmp { color: red }'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'my-cmp'</span><span class="token punctuation">,</span> <span class="token literal-property property">styles</span><span class="token operator">:</span> <span class="token string">'.cmp { color: green }'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// REALLY BAD: In case all related components are removed,</span>
|
|
<span class="token comment">// there is no safe way for the editor to know how to connect</span>
|
|
<span class="token comment">// and clean your styles.</span>
|
|
<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="el">Element</div>
|
|
<div class="el2">Element 2</div>
|
|
<style>
|
|
.el { color: blue }
|
|
.el2 { color: violet }
|
|
</style></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div> <p>With the component-oriented approach, you put yourself in a risk of conflicting styles and having a lot of useless redundant styles definitions in your project JSON.</p> <p>With the HTML string, if you remove all related elements, the editor is not able to clean those styles from the project JSON, as there is no safe way to connect them.</p> <h2 id="programmatic-usage"><a href="#programmatic-usage" class="header-anchor">#</a> Programmatic usage</h2> <p>If you need to manage your blocks programmatically you can use its <a href="/docs/api/block_manager.html">APIs</a>.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>All Blocks API methods update mainly your Block Manager UI, it has nothing to do with Components already dropped in the canvas.</p></div> <p>Below an example of commonly used methods.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Get the BlockManager module first</span>
|
|
<span class="token keyword">const</span> bm <span class="token operator">=</span> editor<span class="token punctuation">.</span>Blocks<span class="token punctuation">;</span> <span class="token comment">// `Blocks` is an alias of `BlockManager`</span>
|
|
|
|
<span class="token comment">// Add a new Block</span>
|
|
<span class="token keyword">const</span> block <span class="token operator">=</span> bm<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'BLOCK-ID'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// Your block properties...</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'My block'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Get the Block</span>
|
|
<span class="token keyword">const</span> block2 <span class="token operator">=</span> bm<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'BLOCK-ID-2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Update the Block properties</span>
|
|
block2<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Updated block'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Remove the Block</span>
|
|
<span class="token keyword">const</span> removedBlock <span class="token operator">=</span> bm<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'BLOCK-ID-2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>To know more about the available block properties, check the <a href="/docs/api/block.html">Block API Reference</a>.</p> <h2 id="customization"><a href="#customization" class="header-anchor">#</a> Customization</h2> <p>The default Block Manager UI is great for simple things, but except the possibility to tweak some CSS style, adding more complex elements requires a replace of the default UI.</p> <p>All you have to do is to indicate the editor your intent to use a custom UI and then subscribe to the <code>block:custom</code> event that will give you all the information on any requested change.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">blockManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">custom</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'block:custom'</span><span class="token punctuation">,</span> <span class="token parameter">props</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// The `props` will contain all the information you need in order to update your UI.</span>
|
|
<span class="token comment">// props.blocks (Array<Block>) - Array of all blocks</span>
|
|
<span class="token comment">// props.dragStart (Function<Block>) - A callback to trigger the start of block dragging.</span>
|
|
<span class="token comment">// props.dragStop (Function<Block>) - A callback to trigger the stop of block dragging.</span>
|
|
<span class="token comment">// props.container (HTMLElement) - The default element where you can append your UI</span>
|
|
|
|
<span class="token comment">// Here you would put the logic to render/update your UI.</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Here an example of using custom Block Manager with a Vue component.</p> <iframe width="100%" height="500" src="//jsfiddle.net/artur_arseniev/xyofm1qr/embedded/js,html,css,result/dark/?menuColor=fff&fontColor=333&accentColor=e67891" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <p>From the demo above you can also see how we decided to hide our custom Block Manager and append it to the default container, but that is up to your preferences.</p> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>For a complete list of available events, you can check it <a href="/docs/api/block_manager.html#available-events">here</a>.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/modules/Blocks.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">3/11/2023, 3:47:09 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/docs/modules/Traits.html" class="prev">
|
|
Traits
|
|
</a></span> <span class="next"><a href="/docs/modules/Assets.html">
|
|
Assets
|
|
</a>
|
|
→
|
|
</span></p></div> </main></div><div class="global-ui"></div></div>
|
|
<script src="/docs/assets/js/app.7cba500a.js" defer></script><script src="/docs/assets/js/4.0070552e.js" defer></script><script src="/docs/assets/js/2.6fefd022.js" defer></script><script src="/docs/assets/js/1.d23e9fed.js" defer></script><script src="/docs/assets/js/81.a3f44150.js" defer></script><script src="/docs/assets/js/33.a739af41.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|