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.
78 lines
28 KiB
78 lines
28 KiB
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Canvas | 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.2c61df29.css" as="style"><link rel="preload" href="/docs/assets/js/app.424ab1f7.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/82.3c8f4a16.js" as="script"><link rel="preload" href="/docs/assets/js/33.1b7b6b41.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.d9e75a94.js"><link rel="prefetch" href="/docs/assets/js/24.96337353.js"><link rel="prefetch" href="/docs/assets/js/25.fe03e194.js"><link rel="prefetch" href="/docs/assets/js/26.33a13a48.js"><link rel="prefetch" href="/docs/assets/js/27.bdeec887.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.2a27db4f.js"><link rel="prefetch" href="/docs/assets/js/35.4c1b458d.js"><link rel="prefetch" href="/docs/assets/js/36.80ac7652.js"><link rel="prefetch" href="/docs/assets/js/37.a813e6f1.js"><link rel="prefetch" href="/docs/assets/js/38.b5848cbf.js"><link rel="prefetch" href="/docs/assets/js/39.ac3b74a5.js"><link rel="prefetch" href="/docs/assets/js/40.0fad8f56.js"><link rel="prefetch" href="/docs/assets/js/41.725a5d92.js"><link rel="prefetch" href="/docs/assets/js/42.34d5f071.js"><link rel="prefetch" href="/docs/assets/js/43.49e4b43f.js"><link rel="prefetch" href="/docs/assets/js/44.dcce613b.js"><link rel="prefetch" href="/docs/assets/js/45.851c5425.js"><link rel="prefetch" href="/docs/assets/js/46.61478c36.js"><link rel="prefetch" href="/docs/assets/js/47.3743426b.js"><link rel="prefetch" href="/docs/assets/js/48.f36e3619.js"><link rel="prefetch" href="/docs/assets/js/49.4692ff79.js"><link rel="prefetch" href="/docs/assets/js/5.08dc74a9.js"><link rel="prefetch" href="/docs/assets/js/50.92c87e88.js"><link rel="prefetch" href="/docs/assets/js/51.6c005fbf.js"><link rel="prefetch" href="/docs/assets/js/52.ede5d238.js"><link rel="prefetch" href="/docs/assets/js/53.14d8e525.js"><link rel="prefetch" href="/docs/assets/js/54.e4f036ef.js"><link rel="prefetch" href="/docs/assets/js/55.510d4705.js"><link rel="prefetch" href="/docs/assets/js/56.96abc2ed.js"><link rel="prefetch" href="/docs/assets/js/57.5452e0eb.js"><link rel="prefetch" href="/docs/assets/js/58.659c993f.js"><link rel="prefetch" href="/docs/assets/js/59.34f9eaca.js"><link rel="prefetch" href="/docs/assets/js/6.3a6e1ed3.js"><link rel="prefetch" href="/docs/assets/js/60.2f610937.js"><link rel="prefetch" href="/docs/assets/js/61.f4e5be3d.js"><link rel="prefetch" href="/docs/assets/js/62.c1df51fe.js"><link rel="prefetch" href="/docs/assets/js/63.0486448b.js"><link rel="prefetch" href="/docs/assets/js/64.1b7300e4.js"><link rel="prefetch" href="/docs/assets/js/65.624d0a0a.js"><link rel="prefetch" href="/docs/assets/js/66.7fe4797b.js"><link rel="prefetch" href="/docs/assets/js/67.925c35aa.js"><link rel="prefetch" href="/docs/assets/js/68.31c90117.js"><link rel="prefetch" href="/docs/assets/js/69.5f040bea.js"><link rel="prefetch" href="/docs/assets/js/7.b99a3113.js"><link rel="prefetch" href="/docs/assets/js/70.6f1ee486.js"><link rel="prefetch" href="/docs/assets/js/71.cbc449e7.js"><link rel="prefetch" href="/docs/assets/js/72.e0d79003.js"><link rel="prefetch" href="/docs/assets/js/73.ca348e41.js"><link rel="prefetch" href="/docs/assets/js/74.0f693fad.js"><link rel="prefetch" href="/docs/assets/js/75.435fb2cb.js"><link rel="prefetch" href="/docs/assets/js/76.05d616a1.js"><link rel="prefetch" href="/docs/assets/js/77.9cf43035.js"><link rel="prefetch" href="/docs/assets/js/78.1139cca5.js"><link rel="prefetch" href="/docs/assets/js/79.4581c86c.js"><link rel="prefetch" href="/docs/assets/js/8.c0e09a5e.js"><link rel="prefetch" href="/docs/assets/js/80.e8ee32b0.js"><link rel="prefetch" href="/docs/assets/js/81.afcc1145.js"><link rel="prefetch" href="/docs/assets/js/83.4c69a7a0.js"><link rel="prefetch" href="/docs/assets/js/84.76c28d97.js"><link rel="prefetch" href="/docs/assets/js/85.584a0e94.js"><link rel="prefetch" href="/docs/assets/js/86.a3fa56ac.js"><link rel="prefetch" href="/docs/assets/js/87.bced23ab.js"><link rel="prefetch" href="/docs/assets/js/88.b2f8cd57.js"><link rel="prefetch" href="/docs/assets/js/89.12fa0df4.js"><link rel="prefetch" href="/docs/assets/js/9.6121e0b4.js"><link rel="prefetch" href="/docs/assets/js/90.383ffdcc.js"><link rel="prefetch" href="/docs/assets/js/91.b721141c.js"><link rel="prefetch" href="/docs/assets/js/92.7e85069f.js"><link rel="prefetch" href="/docs/assets/js/93.0d4acb59.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.2c61df29.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"><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" class="sidebar-link">Blocks</a></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="canvas"><a href="#canvas" class="header-anchor">#</a> Canvas</h1> <div class="custom-block danger"><p class="custom-block-title">WIP</p> <p>The documentation of this module is still a work in progress.</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>This guide is referring to GrapesJS v0.21.5 or higher</p></div> <p></p><div class="table-of-contents"><ul><li><a href="#configuration">Configuration</a></li><li><a href="#canvas-spots">Canvas Spots</a><ul><li><a href="#built-in-spot-types">Built-in spot types</a></li><li><a href="#disable-built-in-types">Disable built-in types</a></li><li><a href="#spots-customization">Spots customization</a></li></ul></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>canvas</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">canvas</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 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/canvas/config/config.ts" target="_blank" rel="noopener noreferrer">Canvas 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="canvas-spots"><a href="#canvas-spots" class="header-anchor">#</a> Canvas Spots</h2> <p>Canvas spots are elements drawn on top of the canvas. They can be used to represent anything you might need but the most common use case of canvas spots is rendering information and managing components rendered in the canvas.</p> <p>In order to get a better understanding of canvas spots let's see their built-in types usage.</p> <h3 id="built-in-spot-types"><a href="#built-in-spot-types" class="header-anchor">#</a> Built-in spot types</h3> <h4 id="select-type"><a href="#select-type" class="header-anchor">#</a> Select type</h4> <img src="/docs/canvas-spot-select.jpg" class="img-ctr" style="max-height:100px;"> <p>The <code>select</code> type is responsable for showing selected components and rendering the available toolbar items of the last selected component.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Get the toolbar items from the component.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> toolbarItems <span class="token operator">=</span> editor<span class="token punctuation">.</span><span class="token function">getSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>toolbar<span class="token punctuation">;</span>
|
|
</code></pre></div></div> <h4 id="resize-type"><a href="#resize-type" class="header-anchor">#</a> Resize type</h4> <img src="/docs/canvas-spot-resize.jpg" class="img-ctr" style="max-height:200px;"> <p>The <code>resize</code> type allows resizing of a component, based on the component's resizable options.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Get the component resizable options.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> resizable <span class="token operator">=</span> editor<span class="token punctuation">.</span><span class="token function">getSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>resizable<span class="token punctuation">;</span>
|
|
</code></pre></div></div> <h4 id="target-type"><a href="#target-type" class="header-anchor">#</a> Target type</h4> <img src="/docs/canvas-spot-target.jpg" class="img-ctr" style="max-height:200px;"> <p>The <code>target</code> type is used to highlight the component, like during the drag & drop, to show where the component will be placed.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>The default green position indicator is not part of the spot but you can easily customize it via CSS.</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.gjs-placeholder.horizontal</span> <span class="token punctuation">{</span>
|
|
<span class="token property">border-color</span><span class="token punctuation">:</span> transparent red<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token selector">.gjs-placeholder.vertical</span> <span class="token punctuation">{</span>
|
|
<span class="token property">border-color</span><span class="token punctuation">:</span> red transparent<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token selector">.gjs-placeholder-int</span> <span class="token punctuation">{</span>
|
|
<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div></div> <h4 id="hover-type"><a href="#hover-type" class="header-anchor">#</a> Hover type</h4> <img src="/docs/canvas-spot-hover.jpg" class="img-ctr" style="max-height:200px;"> <p>The <code>hover</code> is used to highlight the hovered component and show the component name.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Get the component name.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> name <span class="token operator">=</span> editor<span class="token punctuation">.</span><span class="token function">getSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div></div> <h4 id="spacing-type"><a href="#spacing-type" class="header-anchor">#</a> Spacing type</h4> <p>The <code>spacing</code> type is used to show component offsets like paddings and margins (visible on the <code>hover</code> type image above).</p> <h3 id="disable-built-in-types"><a href="#disable-built-in-types" class="header-anchor">#</a> Disable built-in types</h3> <p>You can disable the rendering of built-in canvas spots (some or all of them) during the editor initialization.</p> <div class="language-js extra-class"><pre class="language-js"><code>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">canvas</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// Disable only the hover type spot</span>
|
|
<span class="token literal-property property">customSpots</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">hover</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 comment">// Disable all built-in spots</span>
|
|
<span class="token literal-property property">customSpots</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>
|
|
</code></pre></div><p>In the next section, we'll see how it's possible to reuse the built-in spots and create your own.</p> <h3 id="spots-customization"><a href="#spots-customization" class="header-anchor">#</a> Spots customization</h3> <p>In the example below we'll see how to reuse the built-in <code>hover</code> canvas spot to render our custom highlighting rectangle (we'll disable the rendering of the default one) and create a new one in order to render a button below the selected <code>text</code> components.</p> <p><a href="https://jsfiddle.net/artur_arseniev/zdetbjsg/" target="_blank" rel="noopener noreferrer">DEMO<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> <iframe width="100%" height="500" src="//jsfiddle.net/artur_arseniev/zdetbjsg/embedded/js,html,css,result/dark/?menuColor=fff&fontColor=333&accentColor=e67891" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <p>Worth noting a few important points:</p> <ul><li>Our custom container has to be moved inside the GrapesJS spots container.</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">onReady</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>
|
|
Canvas<span class="token punctuation">.</span><span class="token function">getSpotsEl</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<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><ul><li>We pass the <code>component</code> to our custom spot, in order to have the style coordinates properly updated when we scroll the page or update the component.</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>Canvas<span class="token punctuation">.</span><span class="token function">addSpot</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> customSpotType<span class="token punctuation">,</span> component <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li>The single spot is placed properly with <code>spot.getStyle()</code></li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">...</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spot<span class="token punctuation">"</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spot.getStyle()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
</code></pre></div><ul><li>The spots container, by default, relies on <code>pointer-events: none</code>, in order to prevent the spot from blocking the interaction with the components. This is why we have to re-enable the pointer event on the button in order to make it interactable.</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.spot-text-btn</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">/*...*/</span>
|
|
<span class="token property">pointer-events</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div> <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/canvas.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/Canvas.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">8/30/2023, 2:55:23 PM</span></div></footer> <!----> </main></div><div class="global-ui"></div></div>
|
|
<script src="/docs/assets/js/app.424ab1f7.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/82.3c8f4a16.js" defer></script><script src="/docs/assets/js/33.1b7b6b41.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|