mirror of https://github.com/artf/grapesjs.git
35 changed files with 4371 additions and 2 deletions
@ -0,0 +1,19 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css"> |
|||
</head> |
|||
<body> |
|||
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1><blockquote>Looks like we've got some broken links.</blockquote><a href="/docs/" class="router-link-active">Take me home.</a></div></div></div> |
|||
<script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,335 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>Getting started | GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/11.e1d01d7f.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><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/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/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="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></div></li></ul></div><div class="page"><div class="content"><h1 id="getting-started"><a href="#getting-started" aria-hidden="true" class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/grapes.min.css<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>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/grapes.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gjs<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> |
|||
|
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"> |
|||
<span class="token keyword">var</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> |
|||
container <span class="token punctuation">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span> |
|||
components<span class="token punctuation">:</span> <span class="token string">'<div class="txt-red">Hello world!</div>'</span><span class="token punctuation">,</span> |
|||
style<span class="token punctuation">:</span> <span class="token string">'.txt-red{color: red}'</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
|||
</code></pre></div><p>In just few lines, with the default configurations, you're already able to see something with which play around.</p><p>[[img/default-gjs.jpg]]</p><p>You'll see components commands on top left position that come handy to create and manage your blocks, below there are options which need to highlight and export them. When you select components ('mouse pointer' icon), on the right side, you should see pop up Class Manager and Style Manager options which allow to customize the style of the components. There is also a Layer Manager/Navigator ('hamburger' icon) which helps to manage easily the structure.</p><p>Of course all those stuff (panels, buttons, commands, etc.) are set just as default so you can overwrite them and add more other. Before you start to create things you should know that GrapesJS UI is composed basically by a canvas (where you will 'draw') and panels (which will contain buttons)</p><p>[[img/canvas-panels.jpg]]</p><p>If you'd like to extend the already instantiated editor you have to check <a href="API-Reference">API Reference</a>. Check also <a href="./Creating-plugins">how to create plugins</a> using the same API. |
|||
In this guide we'll focus on how to initialize the editor with all custom UI from scratch.</p><p>Let's start the editor with some basic toolbar panel</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
<span class="token keyword">var</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> |
|||
container <span class="token punctuation">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span> |
|||
height<span class="token punctuation">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> |
|||
|
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'commands'</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><span class="token punctuation">;</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><p>In this example we set a panel with 'commands' as an id and after the render we'll see nothing more than an empty div added to our panels. The new panel is already styled as the id 'commands' is one of the default but you can use whatever you like and place it wherever you want with CSS. With refresh we might see something like shown in the image below, with the new panel on the left:</p><p>[[img/new-panel.png]]</p><blockquote><p>Check <a href="API-Editor">Editor API Reference</a> for more details about editor configurations</p></blockquote><p>Now let's put some button inside</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id <span class="token punctuation">:</span> <span class="token string">'commands'</span><span class="token punctuation">,</span> |
|||
buttons <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id <span class="token punctuation">:</span> <span class="token string">'smile'</span><span class="token punctuation">,</span> |
|||
className <span class="token punctuation">:</span> <span class="token string">'fa fa-smile-o'</span><span class="token punctuation">,</span> |
|||
attributes <span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Smile'</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> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><p>On refresh the page might present some changes ('fa fa-smile-o' are from FontAwesome set, so be sure to have placed correctly the font directory)</p><p>[[img/new-btn.png]]</p><p>Yeah, the button is pretty nice and happy, but useless without any command assigned, if you click on it nothing gonna happen.</p><blockquote><p>Check <a href="API-Panels">Panels API Reference</a> for more details about Panels and Buttons</p></blockquote><p>Assigning commands is pretty easy, but before you should define one or use one of defaults (<a href="./Built-in-commands">Built-in commands</a>). So in this case we gonna create a new one.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id <span class="token punctuation">:</span> <span class="token string">'commands'</span><span class="token punctuation">,</span> |
|||
buttons <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id <span class="token punctuation">:</span> <span class="token string">'smile'</span><span class="token punctuation">,</span> |
|||
className <span class="token punctuation">:</span> <span class="token string">'fa fa-smile-o'</span><span class="token punctuation">,</span> |
|||
attributes <span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Smile'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
command <span class="token punctuation">:</span> <span class="token string">'helloWorld'</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> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
commands<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'helloWorld'</span><span class="token punctuation">,</span> |
|||
|
|||
run<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> senderBtn<span class="token punctuation">)</span><span class="token punctuation">{</span> |
|||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hello world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// Deactivate button</span> |
|||
senderBtn<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
stop<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> senderBtn<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> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><p>As you see we added a new command <code>helloWorld</code> and used its <code>id</code> as an identifier inside <code>button.command</code>. In addition to this we've also implemented two required methods, <code>run</code> and <code>stop</code>, to make button execute commands.</p><p>[[img/btn-clicked.png]]</p><blockquote><p>Check <a href="API-Commands">Commands API Reference</a></p></blockquote><p>Check the <a href="http://grapesjs.com/demo.html" target="_blank" rel="noopener noreferrer">demo<svg xmlns="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"><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></a> for more complete usage of panels, buttons and built-in commands.</p><h2 id="components"><a href="#components" aria-hidden="true" class="header-anchor">#</a> Components</h2><p>Components are elements inside the canvas, which can be drawn by commands or injected directly via configurations. In simple terms components represent the structure of our HTML document. You can init the editor with passing components as an HTML string</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
<span class="token comment">// Disable default local storage in case you've already used GrapesJS</span> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span>type<span class="token punctuation">:</span> <span class="token string">'none'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
components<span class="token punctuation">:</span> <span class="token string">'<div style="width:300px; min-height:100px; margin: 0 auto"></div>'</span> <span class="token operator">+</span> |
|||
<span class="token string">'<div style="width:400px; min-height:100px; margin: 0 auto"></div>'</span> <span class="token operator">+</span> |
|||
<span class="token string">'<div style="width:500px; min-height:100px; margin: 0 auto"></div>'</span><span class="token punctuation">,</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><p>We added 3 simple components with some basic style. If you refresh probably you'll see the same empty page but are actually there, you only need to highlight them. |
|||
For this purpose already exists a command, so add it to your panel in this way</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id <span class="token punctuation">:</span> <span class="token string">'commands'</span><span class="token punctuation">,</span> |
|||
buttons <span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'smile'</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> |
|||
id <span class="token punctuation">:</span> <span class="token string">'vis'</span><span class="token punctuation">,</span> |
|||
className <span class="token punctuation">:</span> <span class="token string">'fa fa-eye'</span><span class="token punctuation">,</span> |
|||
command <span class="token punctuation">:</span> <span class="token string">'sw-visibility'</span><span class="token punctuation">,</span> |
|||
context <span class="token punctuation">:</span> <span class="token string">'some-random-context'</span><span class="token punctuation">,</span> <span class="token comment">// For grouping context of buttons in the same panel</span> |
|||
active <span class="token punctuation">:</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><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><p>Worth noting the use of <code>context</code> option (try to click 'smile' command without it) and <code>active</code> to enable it after the render. |
|||
Now you should be able to see blocks inside canvas.</p><p>[[img/blocks3.jpg]]</p><p>You could add other commands to enable interactions with blocks. Check <a href="./Built-in-commands">Built-in commands</a> to get more information</p><blockquote><p>Check <a href="API-Components">Components API Reference</a></p></blockquote><h2 id="style-manager"><a href="#style-manager" aria-hidden="true" class="header-anchor">#</a> Style Manager</h2><p>Any HTML structure requires, at some point, a proper style, so to meet this need the Style Manager was added as a built-in feature in GrapesJS. Style manager is composed by sectors, which group inside different types of CSS properties. So you can add, for instance, a <code>Dimension</code> sector for <code>width</code> and <code>height</code>, and another one as <code>Typography</code> for <code>font-size</code> and <code>color</code>. So it's up to you decide how organize sectors.</p><p>To enable this module we rely on a built-in command <code>open-sm</code>, which shows up the Style Manager, which we gonna bind to another button in a separate panel</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults <span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
id <span class="token punctuation">:</span> <span class="token string">'commands'</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 comment">// If you use this id the default CSS will place this panel on top right corner for you</span> |
|||
id <span class="token punctuation">:</span> <span class="token string">'views'</span><span class="token punctuation">,</span> |
|||
buttons <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id <span class="token punctuation">:</span> <span class="token string">'open-style-manager'</span><span class="token punctuation">,</span> |
|||
className <span class="token punctuation">:</span> <span class="token string">'fa fa-paint-brush'</span><span class="token punctuation">,</span> |
|||
command <span class="token punctuation">:</span> <span class="token string">'open-sm'</span><span class="token punctuation">,</span> |
|||
active <span class="token punctuation">:</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> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><p>After this you'll be able to see something like in the image below</p><p>[[img/enabled-sm.jpg]]</p><p>As you can see Style Manager is enabled but before using it you have to select an element in the canvas, for this purpose we can add another button with a built-in command <code>select-comp</code> in this way</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id <span class="token punctuation">:</span> <span class="token string">'commands'</span><span class="token punctuation">,</span> |
|||
buttons <span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'smile'</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> |
|||
id <span class="token punctuation">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> |
|||
className <span class="token punctuation">:</span> <span class="token string">'fa fa-mouse-pointer'</span><span class="token punctuation">,</span> |
|||
command <span class="token punctuation">:</span> <span class="token string">'select-comp'</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> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><p>Selecting one of the component will show up the Style Manager with default sectors, properties and an input where you can manage classes. The default class you see (cXX) was generated by extracting style from the component</p><p>[[img/default-sm.jpg]]</p><p>As we exploring different configurations inside GrapesJS we gonna overwrite all the default sectors to create some custom one</p><p>Let's put a few sectors with use of <code>buildProps</code> which helps us building common properties</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
styleManager <span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
sectors<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Dimension'</span><span class="token punctuation">,</span> |
|||
buildProps<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token string">'min-height'</span><span class="token punctuation">]</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Extra'</span><span class="token punctuation">,</span> |
|||
buildProps<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'background-color'</span><span class="token punctuation">,</span> <span class="token string">'box-shadow'</span><span class="token punctuation">]</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">]</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><p>Now you should be able to style components</p><p>[[img/style-comp.jpg]]</p><p>You can check the list of usable properties inside <code>buildProps</code> here: <a href="./Built-in-properties">Built-in properties</a> |
|||
otherwise is possible to build them on your own, let's see how we'd have done the previous configuration without the <code>buildProps</code> helper</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
styleManager <span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
sectors<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Dimension'</span><span class="token punctuation">,</span> |
|||
properties<span class="token punctuation">:</span><span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
<span class="token comment">// Just the name</span> |
|||
name <span class="token punctuation">:</span> <span class="token string">'Width'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// CSS property</span> |
|||
property <span class="token punctuation">:</span> <span class="token string">'width'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Type of the input, options: integer | radio | select | color | file | composite | stack</span> |
|||
type <span class="token punctuation">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Units, available only for 'integer' types</span> |
|||
units <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span> <span class="token string">'%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Default value</span> |
|||
defaults <span class="token punctuation">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Min value, available only for 'integer' types</span> |
|||
min <span class="token punctuation">:</span> <span class="token number">0</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">// Here I'm going to be more original</span> |
|||
name <span class="token punctuation">:</span> <span class="token string">'Minimum height'</span><span class="token punctuation">,</span> |
|||
property <span class="token punctuation">:</span> <span class="token string">'min-height'</span><span class="token punctuation">,</span> |
|||
type <span class="token punctuation">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> |
|||
defaults <span class="token punctuation">:</span> <span class="token string">'100px'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// List of options, available only for 'select' and 'radio' types</span> |
|||
list <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
value <span class="token punctuation">:</span> <span class="token string">'100px'</span><span class="token punctuation">,</span> |
|||
name <span class="token punctuation">:</span> <span class="token string">'100'</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
value <span class="token punctuation">:</span> <span class="token string">'200px'</span><span class="token punctuation">,</span> |
|||
name <span class="token punctuation">:</span> <span class="token string">'200'</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
value <span class="token punctuation">:</span> <span class="token string">'300px'</span><span class="token punctuation">,</span> |
|||
name <span class="token punctuation">:</span> <span class="token string">'300'</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><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Extra'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Sectors are expanded by default so put this one closed</span> |
|||
open<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
|||
properties<span class="token punctuation">:</span><span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
name <span class="token punctuation">:</span> <span class="token string">'Background'</span><span class="token punctuation">,</span> |
|||
property <span class="token punctuation">:</span> <span class="token string">'background-color'</span><span class="token punctuation">,</span> |
|||
type <span class="token punctuation">:</span> <span class="token string">'color'</span><span class="token punctuation">,</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token string">'none'</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
name <span class="token punctuation">:</span> <span class="token string">'Box shadow'</span><span class="token punctuation">,</span> |
|||
property <span class="token punctuation">:</span> <span class="token string">'box-shadow'</span><span class="token punctuation">,</span> |
|||
type <span class="token punctuation">:</span> <span class="token string">'stack'</span><span class="token punctuation">,</span> |
|||
preview <span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// List of nested properties, available only for 'stack' and 'composite' types</span> |
|||
properties <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Shadow type'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Nested properties with stack/composite type don't require proper 'property' name</span> |
|||
<span class="token comment">// as all of them will be merged to parent property, eg. box-shadow: X Y ...;</span> |
|||
property<span class="token punctuation">:</span> <span class="token string">'shadow-type'</span><span class="token punctuation">,</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span> |
|||
list<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> value <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'Outside'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">{</span> value <span class="token punctuation">:</span> <span class="token string">'inset'</span><span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'Inside'</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> |
|||
name<span class="token punctuation">:</span> <span class="token string">'X position'</span><span class="token punctuation">,</span> |
|||
property<span class="token punctuation">:</span> <span class="token string">'shadow-x'</span><span class="token punctuation">,</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span> |
|||
units<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span><span class="token string">'%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
defaults <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Y position'</span><span class="token punctuation">,</span> |
|||
property<span class="token punctuation">:</span> <span class="token string">'shadow-y'</span><span class="token punctuation">,</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span> |
|||
units<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span><span class="token string">'%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
defaults <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Blur'</span><span class="token punctuation">,</span> |
|||
property<span class="token punctuation">:</span> <span class="token string">'shadow-blur'</span><span class="token punctuation">,</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span> |
|||
units<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
defaults <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
|||
min<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Spread'</span><span class="token punctuation">,</span> |
|||
property<span class="token punctuation">:</span> <span class="token string">'shadow-spread'</span><span class="token punctuation">,</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span> |
|||
units<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
defaults <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Color'</span><span class="token punctuation">,</span> |
|||
property<span class="token punctuation">:</span> <span class="token string">'shadow-color'</span><span class="token punctuation">,</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'color'</span><span class="token punctuation">,</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token string">'black'</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> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">]</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><p>As you can see using <code>buildProps</code> actually will save you a lot of work. You could also mix this techniques to obtain custom properties in less time. For example, let's see how can we setup the same width but with a different value of <code>min</code>:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
styleManager <span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
sectors<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Dimension'</span><span class="token punctuation">,</span> |
|||
buildProps<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token string">'min-height'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
properties<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
property<span class="token punctuation">:</span> <span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token comment">// Use 'property' as id</span> |
|||
min<span class="token punctuation">:</span> <span class="token number">30</span> |
|||
<span class="token punctuation">}</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 operator">...</span> |
|||
</code></pre></div><blockquote><p>Check <a href="API-Style-Manager">Style Manager API Reference</a></p></blockquote><h2 id="store-load-data"><a href="#store-load-data" aria-hidden="true" class="header-anchor">#</a> Store/load data</h2><p>In this last part we're gonna see how to store and load template data inside GrapesJS. You may already noticed that even if you refresh the page after changes on canvas your data are not lost and this because GrapesJS comes with some built-in storage implementation. |
|||
The default one is the localStorage which is pretty simple and all the data are stored locally on your computer. Let's see the options available for this storage</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
<span class="token keyword">var</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> |
|||
container <span class="token punctuation">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span> |
|||
<span class="token operator">...</span> |
|||
<span class="token comment">// Default configuration</span> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'gjs-'</span><span class="token punctuation">,</span> <span class="token comment">// Prefix identifier that will be used inside storing and loading</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'local'</span><span class="token punctuation">,</span> <span class="token comment">// Type of the storage</span> |
|||
autosave<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Store data automatically</span> |
|||
autoload<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Autoload stored data on init</span> |
|||
stepsBeforeSave<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// If autosave enabled, indicates how many changes are necessary before store method is triggered</span> |
|||
storeComponents<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of components in JSON format</span> |
|||
storeStyles<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of rules/style in JSON format</span> |
|||
storeHtml<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of components as HTML string</span> |
|||
storeCss<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of rules/style as CSS 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 operator">...</span> |
|||
</code></pre></div><p>Worth noting the defaut <code>id</code> parameter which adds a prefix for all keys to store. If you check the localStorage inside your DOM panel you'll see something like <code>{ 'gjs-components': '<div>....' ...}</code> in this way it prevents the risk of collisions, quite common with localStorage use in large applications.</p><p>Storing data locally it's easy and fast but useless in some common cases. In the next example we'll see how to setup a remote storage, which is not far from the previous one</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
<span class="token keyword">var</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> |
|||
container <span class="token punctuation">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span> |
|||
<span class="token operator">...</span> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'remote'</span><span class="token punctuation">,</span> |
|||
stepsBeforeSave<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
|||
urlStore<span class="token punctuation">:</span> <span class="token string">'http://store/endpoint'</span><span class="token punctuation">,</span> |
|||
urlLoad<span class="token punctuation">:</span> <span class="token string">'http://load/endpoint'</span><span class="token punctuation">,</span> |
|||
params<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// For custom values on requests</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><p>As you can see we've left some default option unchanged, increased changes necessary for autosave triggering and passed remote endpoints.</p><p>If you prefer you could also disable autosaving and do it by yourself using some custom command in this way:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'remote'</span><span class="token punctuation">,</span> |
|||
autosave<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token operator">...</span> |
|||
commands<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'storeData'</span><span class="token punctuation">,</span> |
|||
run<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> senderBtn<span class="token punctuation">)</span><span class="token punctuation">{</span> |
|||
editor<span class="token punctuation">.</span><span class="token function">store</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> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><blockquote><p>Check <a href="API-Storage-Manager">Storage Manager API Reference</a></p></blockquote></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/Home.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/13/2018, 12:12:35 AM</span></div></div><!----></div></div></div> |
|||
<script src="/docs/assets/js/11.e1d01d7f.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,85 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/15.e5ae77bc.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="active sidebar-link">Block Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#blockmanager" class="sidebar-link">BlockManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#onload" class="sidebar-link">onLoad</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getallvisible" class="sidebar-link">getAllVisible</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getcategories" class="sidebar-link">getCategories</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getcontainer" class="sidebar-link">getContainer</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#render" class="sidebar-link">render</a></li></ul></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="blockmanager"><a href="#blockmanager" aria-hidden="true" class="header-anchor">#</a> BlockManager</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="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"><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></a></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> |
|||
blockManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// options</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> blockManager <span class="token operator">=</span> editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">;</span> |
|||
</code></pre></div><ul><li><a href="#add">add</a></li><li><a href="#get">get</a></li><li><a href="#getall">getAll</a></li><li><a href="#getallvisible">getAllVisible</a></li><li><a href="#remove">remove</a></li><li><a href="#getconfig">getConfig</a></li><li><a href="#getcategories">getCategories</a></li><li><a href="#getcontainer">getContainer</a></li><li><a href="#render">render</a></li></ul><h2 id="getconfig"><a href="#getconfig" aria-hidden="true" class="header-anchor">#</a> getConfig</h2><p>Get configuration object</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong></p><h2 id="onload"><a href="#onload" aria-hidden="true" class="header-anchor">#</a> onLoad</h2><p>Load default blocks if the collection is empty</p><h2 id="add"><a href="#add" aria-hidden="true" class="header-anchor">#</a> add</h2><p>Add new block to the collection.</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Block id</li><li><code>opts</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Options |
|||
<ul><li><code>opts.label</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Name of the block</li><li><code>opts.content</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> HTML content</li><li><code>opts.category</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a>)</strong> Group the block inside a catgegory. |
|||
You should pass objects with id property, eg: |
|||
{id: 'some-uid', label: 'My category'} |
|||
The string will be converted in: |
|||
'someid' => {id: 'someid', label: 'someid'}</li><li><code>opts.attributes</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Block attributes (optional, default <code>{}</code>)</li></ul></li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>blockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'h1-block'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Heading'</span><span class="token punctuation">,</span> |
|||
content<span class="token punctuation">:</span> <span class="token string">'<h1>Put your title here</h1>'</span><span class="token punctuation">,</span> |
|||
category<span class="token punctuation">:</span> <span class="token string">'Basic'</span><span class="token punctuation">,</span> |
|||
attributes<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
title<span class="token punctuation">:</span> <span class="token string">'Insert h1 block'</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>Returns <strong>Block</strong> Added block</p><h2 id="get"><a href="#get" aria-hidden="true" class="header-anchor">#</a> get</h2><p>Return the block by id</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Block id</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> block <span class="token operator">=</span> blockManager<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'h1-block'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>block<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// {label: 'Heading', content: '<h1>Put your ...', ...}</span> |
|||
</code></pre></div><h2 id="getall"><a href="#getall" aria-hidden="true" class="header-anchor">#</a> getAll</h2><p>Return all blocks</p><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> blocks <span class="token operator">=</span> blockManager<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>blocks<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// [{label: 'Heading', content: '<h1>Put your ...'}, ...]</span> |
|||
</code></pre></div><p>Returns <strong>Collection</strong></p><h2 id="getallvisible"><a href="#getallvisible" aria-hidden="true" class="header-anchor">#</a> getAllVisible</h2><p>Return the visible collection, which containes blocks actually rendered</p><p>Returns <strong>Collection</strong></p><h2 id="remove"><a href="#remove" aria-hidden="true" class="header-anchor">#</a> remove</h2><p>Remove a block by id</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Block id</li></ul><p>Returns <strong>Block</strong> Removed block</p><h2 id="getcategories"><a href="#getcategories" aria-hidden="true" class="header-anchor">#</a> getCategories</h2><p>Get all available categories. |
|||
It's possible to add categories only within blocks via 'add()' method</p><p>Returns <strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<svg xmlns="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"><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></a> | Collection)</strong></p><h2 id="getcontainer"><a href="#getcontainer" aria-hidden="true" class="header-anchor">#</a> getContainer</h2><p>Return the Blocks container element</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<svg xmlns="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"><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></a></strong></p><h2 id="render"><a href="#render" aria-hidden="true" class="header-anchor">#</a> render</h2><p>Render blocks</p><h3 id="parameters-4"><a href="#parameters-4" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>blocks</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<svg xmlns="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"><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></a></strong> Blocks to render, without the argument will render all global blocks</li><li><code>opts</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Options (optional, default <code>{}</code>) |
|||
<ul><li><code>opts.external</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="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"><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></a>?</strong> Render blocks in a new container (HTMLElement will be returned)</li><li><code>opts.ignoreCategories</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="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"><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></a>?</strong> Render blocks without categories</li></ul></li></ul><h3 id="examples-4"><a href="#examples-4" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// Render all blocks (inside the global collection)</span> |
|||
blockManager<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
|
|||
<span class="token comment">// Render new set of blocks</span> |
|||
<span class="token keyword">const</span> blocks <span class="token operator">=</span> blockManager<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">const</span> filtered <span class="token operator">=</span> blocks<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>block <span class="token operator">=></span> block<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'category'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'sections'</span><span class="token punctuation">)</span> |
|||
|
|||
blockManager<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>filtered<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// Or a new set from an array</span> |
|||
blockManager<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span>label<span class="token punctuation">:</span> <span class="token string">'Label text'</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span> <span class="token string">'<div>Content</div>'</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">// Back to blocks from the global collection</span> |
|||
blockManager<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
|
|||
<span class="token comment">// You can also render your blocks outside of the main block container</span> |
|||
<span class="token keyword">const</span> newBlocksEl <span class="token operator">=</span> blockManager<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>filtered<span class="token punctuation">,</span> <span class="token punctuation">{</span> external<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'some-id'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>newBlocksEl<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<svg xmlns="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"><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></a></strong> Rendered element</p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/block_manager.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">1/28/2019, 7:45:05 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/api/assets.html" class="prev"> |
|||
Asset Manager |
|||
</a></span><span class="next"><a href="/docs/api/commands.html"> |
|||
Commands |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/15.e5ae77bc.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,76 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/17.2a67de0b.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="active sidebar-link">Commands</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/commands.html#commands" class="sidebar-link">Commands</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#extend" class="sidebar-link">extend</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#has" class="sidebar-link">has</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#run" class="sidebar-link">run</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#stop" class="sidebar-link">stop</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#isactive" class="sidebar-link">isActive</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#getactive" class="sidebar-link">getActive</a></li></ul></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="commands"><a href="#commands" aria-hidden="true" class="header-anchor">#</a> Commands</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="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"><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></a></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> |
|||
commands<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// options</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> commands <span class="token operator">=</span> editor<span class="token punctuation">.</span>Commands<span class="token punctuation">;</span> |
|||
</code></pre></div><ul><li><a href="#add">add</a></li><li><a href="#get">get</a></li><li><a href="#getall">getAll</a></li><li><a href="#extend">extend</a></li><li><a href="#has">has</a></li><li><a href="#run">run</a></li><li><a href="#stop">stop</a></li><li><a href="#isactive">isActive</a></li><li><a href="#getactive">getActive</a></li></ul><h2 id="add"><a href="#add" aria-hidden="true" class="header-anchor">#</a> add</h2><p>Add new command to the collection</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Command's ID</li><li><code>command</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<svg xmlns="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"><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></a>)</strong> Object representing your command, |
|||
By passing just a function it's intended as a stateless command |
|||
(just like passing an object with only <code>run</code> method).</li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'myCommand'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token function">run</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> sender<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hello world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token function">stop</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> sender<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> |
|||
<span class="token comment">// As a function</span> |
|||
commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'myCommand2'</span><span class="token punctuation">,</span> editor <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> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="get"><a href="#get" aria-hidden="true" class="header-anchor">#</a> get</h2><p>Get command by ID</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Command's ID</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> myCommand <span class="token operator">=</span> commands<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'myCommand'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
myCommand<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Object representing the command</p><h2 id="extend"><a href="#extend" aria-hidden="true" class="header-anchor">#</a> extend</h2><p>Extend the command. The command to extend should be defined as an object</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Command's ID</li><li><code>cmd</code> (optional, default <code>{}</code>)</li><li><code>Object</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> with the new command functions</li></ul><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>commands<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token string">'old-command'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token function">someInnerFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// ...</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>Returns <strong>this</strong></p><h2 id="has"><a href="#has" aria-hidden="true" class="header-anchor">#</a> has</h2><p>Check if command exists</p><h3 id="parameters-4"><a href="#parameters-4" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Command's ID</li></ul><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="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"><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></a></strong></p><h2 id="getall"><a href="#getall" aria-hidden="true" class="header-anchor">#</a> getAll</h2><p>Get an object containing all the commands</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong></p><h2 id="run"><a href="#run" aria-hidden="true" class="header-anchor">#</a> run</h2><p>Execute the command</p><h3 id="parameters-5"><a href="#parameters-5" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a></strong> Command ID</li><li><code>options</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Options (optional, default <code>{}</code>)</li></ul><h3 id="examples-4"><a href="#examples-4" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>commands<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token string">'myCommand'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> someOption<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2 id="stop"><a href="#stop" aria-hidden="true" class="header-anchor">#</a> stop</h2><p>Stop the command</p><h3 id="parameters-6"><a href="#parameters-6" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a></strong> Command ID</li><li><code>options</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Options (optional, default <code>{}</code>)</li></ul><h3 id="examples-5"><a href="#examples-5" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>commands<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token string">'myCommand'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> someOption<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2 id="isactive"><a href="#isactive" aria-hidden="true" class="header-anchor">#</a> isActive</h2><p>Check if the command is active. You activate commands with <code>run</code> |
|||
and disable them with <code>stop</code>. If the command was created without <code>stop</code> |
|||
method it can't be registered as active</p><h3 id="parameters-7"><a href="#parameters-7" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a></strong> Command id</li></ul><h3 id="examples-6"><a href="#examples-6" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> cId <span class="token operator">=</span> <span class="token string">'some-command'</span><span class="token punctuation">;</span> |
|||
commands<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span>cId<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
commands<span class="token punctuation">.</span><span class="token function">isActive</span><span class="token punctuation">(</span>cId<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// -> true</span> |
|||
commands<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span>cId<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
commands<span class="token punctuation">.</span><span class="token function">isActive</span><span class="token punctuation">(</span>cId<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// -> false</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="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"><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></a></strong></p><h2 id="getactive"><a href="#getactive" aria-hidden="true" class="header-anchor">#</a> getActive</h2><p>Get all active commands</p><h3 id="examples-7"><a href="#examples-7" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>commands<span class="token punctuation">.</span><span class="token function">getActive</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">// -> { someCommand: itsLastReturn, anotherOne: ... };</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/commands.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/26/2018, 2:24:48 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/api/block_manager.html" class="prev"> |
|||
Block Manager |
|||
</a></span><span class="next"><a href="/docs/api/components.html"> |
|||
DOM Components |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/17.2a67de0b.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,56 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/21.3e3438bd.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="active sidebar-link">Device Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#devicemanager" class="sidebar-link">DeviceManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#getall" class="sidebar-link">getAll</a></li></ul></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="devicemanager"><a href="#devicemanager" aria-hidden="true" class="header-anchor">#</a> DeviceManager</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/device_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="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"><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></a></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> |
|||
deviceManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// options</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> deviceManager <span class="token operator">=</span> editor<span class="token punctuation">.</span>DeviceManager<span class="token punctuation">;</span> |
|||
</code></pre></div><ul><li><a href="#add">add</a></li><li><a href="#get">get</a></li><li><a href="#getAll">getAll</a></li></ul><h2 id="add"><a href="#add" aria-hidden="true" class="header-anchor">#</a> add</h2><p>Add new device to the collection. URLs are supposed to be unique</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Device name</li><li><code>width</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Width of the device</li><li><code>opts</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Custom options</li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>deviceManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'Tablet'</span><span class="token punctuation">,</span> <span class="token string">'900px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
deviceManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'Tablet2'</span><span class="token punctuation">,</span> <span class="token string">'900px'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
height<span class="token punctuation">:</span> <span class="token string">'300px'</span><span class="token punctuation">,</span> |
|||
widthMedia<span class="token punctuation">:</span> <span class="token string">'810px'</span><span class="token punctuation">,</span> <span class="token comment">// the width that will be used for the CSS media</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>Device</strong> Added device</p><h2 id="get"><a href="#get" aria-hidden="true" class="header-anchor">#</a> get</h2><p>Return device by name</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Name of the device</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> device <span class="token operator">=</span> deviceManager<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'Tablet'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>device<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// {name: 'Tablet', width: '900px'}</span> |
|||
</code></pre></div><h2 id="getall"><a href="#getall" aria-hidden="true" class="header-anchor">#</a> getAll</h2><p>Return all devices</p><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> devices <span class="token operator">=</span> deviceManager<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>devices<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// [{name: 'Desktop', width: ''}, ...]</span> |
|||
</code></pre></div><p>Returns <strong>Collection</strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/device_manager.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/8/2018, 11:31:47 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/api/storage_manager.html" class="prev"> |
|||
Storage Manager |
|||
</a></span><span class="next"><a href="/docs/api/selector_manager.html"> |
|||
Selector Manager |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/21.3e3438bd.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,36 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>API Reference | GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/13.2c86d6bb.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css"> |
|||
</head> |
|||
<body> |
|||
<div id="app" data-server-rendered="true"><div class="theme-container page__apis"><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" 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 router-link-exact-active router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 router-link-exact-active router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="active sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h1 id="api-reference"><a href="#api-reference" aria-hidden="true" class="header-anchor">#</a> API Reference</h1><p>Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also <a href="/docs/modules/Plugins.html">create a plugin</a> and make those extensions reusable and available to others.</p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/README.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/9/2018, 1:03:59 AM</span></div></div><div class="page-nav"><p class="inner"><!----><span class="next"><a href="/docs/api/editor.html"> |
|||
Editor |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/13.2c86d6bb.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,70 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/23.a1fe2201.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="active sidebar-link">Keymaps</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#keymaps" class="sidebar-link">Keymaps</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#removeall" class="sidebar-link">removeAll</a></li></ul></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="keymaps"><a href="#keymaps" aria-hidden="true" class="header-anchor">#</a> Keymaps</h2><p>You can customize the initial state of the module from the editor initialization</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> |
|||
keymaps<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// Object of keymaps</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token string">'your-namespace:keymap-name'</span> <span class="token punctuation">{</span> |
|||
keys<span class="token punctuation">:</span> <span class="token string">'⌘+z, ctrl+z'</span><span class="token punctuation">,</span> |
|||
handler<span class="token punctuation">:</span> <span class="token string">'some-command-id'</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>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> keymaps <span class="token operator">=</span> editor<span class="token punctuation">.</span>Keymaps<span class="token punctuation">;</span> |
|||
</code></pre></div><ul><li><a href="#getconfig">getConfig</a></li><li><a href="#add">add</a></li><li><a href="#get">get</a></li><li><a href="#getAll">getAll</a></li><li><a href="#remove">remove</a></li><li><a href="#removeall">removeAll</a></li></ul><h2 id="getconfig"><a href="#getconfig" aria-hidden="true" class="header-anchor">#</a> getConfig</h2><p>Get module configurations</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Configuration object</p><h2 id="add"><a href="#add" aria-hidden="true" class="header-anchor">#</a> add</h2><p>Add new keymap</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Keymap id</li><li><code>keys</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Keymap keys, eg. <code>ctrl+a</code>, <code>⌘+z, ctrl+z</code></li><li><code>handler</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<svg xmlns="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"><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></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a>)</strong> Keymap handler, might be a function</li><li><code>opts</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Options (optional, default <code>{}</code>)</li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 'ns' is just a custom namespace</span> |
|||
keymaps<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'ns:my-keymap'</span><span class="token punctuation">,</span> <span class="token string">'⌘+j, ⌘+u, ctrl+j, alt+u'</span><span class="token punctuation">,</span> editor <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'do stuff'</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">// or</span> |
|||
keymaps<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'ns:my-keymap'</span><span class="token punctuation">,</span> <span class="token string">'⌘+s, ctrl+s'</span><span class="token punctuation">,</span> <span class="token string">'some-gjs-command'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
|
|||
<span class="token comment">// listen to events</span> |
|||
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'keymap:emit'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>id<span class="token punctuation">,</span> shortcut<span class="token punctuation">,</span> e<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Added keymap |
|||
or just a command id as a string</p><h2 id="get"><a href="#get" aria-hidden="true" class="header-anchor">#</a> get</h2><p>Get the keymap by id</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Keymap id</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>keymaps<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'ns:my-keymap'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// -> {keys, handler};</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Keymap object</p><h2 id="getall"><a href="#getall" aria-hidden="true" class="header-anchor">#</a> getAll</h2><p>Get all keymaps</p><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>keymaps<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// -> {id1: {}, id2: {}};</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong></p><h2 id="remove"><a href="#remove" aria-hidden="true" class="header-anchor">#</a> remove</h2><p>Remove the keymap by id</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Keymap id</li></ul><h3 id="examples-4"><a href="#examples-4" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>keymaps<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'ns:my-keymap'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// -> {keys, handler};</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Removed keymap</p><h2 id="removeall"><a href="#removeall" aria-hidden="true" class="header-anchor">#</a> removeAll</h2><p>Remove all binded keymaps</p><p>Returns <strong>this</strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/keymaps.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">3/11/2019, 6:17:19 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/api/rich_text_editor.html" class="prev"> |
|||
Rich Text Editor |
|||
</a></span><span class="next"><a href="/docs/api/undo_manager.html"> |
|||
Undo Manager |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/23.a1fe2201.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,50 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/24.fefe1628.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="active sidebar-link">Modal</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#modal" class="sidebar-link">Modal</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#open" class="sidebar-link">open</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#close" class="sidebar-link">close</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#onceclose" class="sidebar-link">onceClose</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#onceopen" class="sidebar-link">onceOpen</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#isopen" class="sidebar-link">isOpen</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#settitle" class="sidebar-link">setTitle</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#gettitle" class="sidebar-link">getTitle</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#setcontent" class="sidebar-link">setContent</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#getcontent" class="sidebar-link">getContent</a></li></ul></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="modal"><a href="#modal" aria-hidden="true" class="header-anchor">#</a> Modal</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/modal_dialog/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="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"><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></a></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> |
|||
modal<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// options</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> modal <span class="token operator">=</span> editor<span class="token punctuation">.</span>Modal<span class="token punctuation">;</span> |
|||
</code></pre></div><ul><li><a href="#open">open</a></li><li><a href="#close">close</a></li><li><a href="#isopen">isOpen</a></li><li><a href="#settitle">setTitle</a></li><li><a href="#gettitle">getTitle</a></li><li><a href="#setcontent">setContent</a></li><li><a href="#getcontent">getContent</a></li><li><a href="#onceclose">onceClose</a></li><li><a href="#onceopen">onceOpen</a></li></ul><h2 id="open"><a href="#open" aria-hidden="true" class="header-anchor">#</a> open</h2><p>Open the modal window</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>opts</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Options (optional, default <code>{}</code>) |
|||
<ul><li><code>opts.title</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a> | <a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<svg xmlns="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"><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></a>)?</strong> Title to set for the modal</li><li><code>opts.content</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a> | <a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<svg xmlns="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"><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></a>)?</strong> Content to set for the modal</li></ul></li></ul><p>Returns <strong>this</strong></p><h2 id="close"><a href="#close" aria-hidden="true" class="header-anchor">#</a> close</h2><p>Close the modal window</p><p>Returns <strong>this</strong></p><h2 id="onceclose"><a href="#onceclose" aria-hidden="true" class="header-anchor">#</a> onceClose</h2><p>Execute callback when the modal will be closed. |
|||
The callback will be called one only time</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<svg xmlns="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"><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></a></strong></li></ul><p>Returns <strong>this</strong></p><h2 id="onceopen"><a href="#onceopen" aria-hidden="true" class="header-anchor">#</a> onceOpen</h2><p>Execute callback when the modal will be opened. |
|||
The callback will be called one only time</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<svg xmlns="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"><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></a></strong></li></ul><p>Returns <strong>this</strong></p><h2 id="isopen"><a href="#isopen" aria-hidden="true" class="header-anchor">#</a> isOpen</h2><p>Checks if the modal window is open</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="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"><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></a></strong></p><h2 id="settitle"><a href="#settitle" aria-hidden="true" class="header-anchor">#</a> setTitle</h2><p>Set the title to the modal window</p><h3 id="parameters-4"><a href="#parameters-4" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>title</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Title</li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>modal<span class="token punctuation">.</span><span class="token function">setTitle</span><span class="token punctuation">(</span><span class="token string">'New title'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="gettitle"><a href="#gettitle" aria-hidden="true" class="header-anchor">#</a> getTitle</h2><p>Returns the title of the modal window</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong></p><h2 id="setcontent"><a href="#setcontent" aria-hidden="true" class="header-anchor">#</a> setContent</h2><p>Set the content of the modal window</p><h3 id="parameters-5"><a href="#parameters-5" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>content</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a> | <a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<svg xmlns="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"><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></a>)</strong> Content</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>modal<span class="token punctuation">.</span><span class="token function">setContent</span><span class="token punctuation">(</span><span class="token string">'<div>Some HTML content</div>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="getcontent"><a href="#getcontent" aria-hidden="true" class="header-anchor">#</a> getContent</h2><p>Get the content of the modal window</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/modal_dialog.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/10/2018, 12:36:09 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/api/css_composer.html" class="prev"> |
|||
CSS Composer |
|||
</a></span><span class="next"><a href="/docs/api/rich_text_editor.html"> |
|||
Rich Text Editor |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/24.fefe1628.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,91 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/25.32714364.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="active sidebar-link">Panels</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/panels.html#panels" class="sidebar-link">Panels</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getpanels" class="sidebar-link">getPanels</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getpanelsel" class="sidebar-link">getPanelsEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#addpanel" class="sidebar-link">addPanel</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#removepanel" class="sidebar-link">removePanel</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getpanel" class="sidebar-link">getPanel</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#addbutton" class="sidebar-link">addButton</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#removebutton" class="sidebar-link">removeButton</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getbutton" class="sidebar-link">getButton</a></li></ul></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="panels"><a href="#panels" aria-hidden="true" class="header-anchor">#</a> Panels</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="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"><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></a></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> |
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// options</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> panelManager <span class="token operator">=</span> editor<span class="token punctuation">.</span>Panels<span class="token punctuation">;</span> |
|||
</code></pre></div><ul><li><a href="#addpanel">addPanel</a></li><li><a href="#addbutton">addButton</a></li><li><a href="#getbutton">getButton</a></li><li><a href="#getpanel">getPanel</a></li><li><a href="#getpanels">getPanels</a></li><li><a href="#getpanelsel">getPanelsEl</a></li><li><a href="#removepanel">removePanel</a></li><li><a href="#removebutton">removeButton</a></li></ul><h2 id="getpanels"><a href="#getpanels" aria-hidden="true" class="header-anchor">#</a> getPanels</h2><p>Returns the collection of panels</p><p>Returns <strong>Collection</strong> Collection of panel</p><h2 id="getpanelsel"><a href="#getpanelsel" aria-hidden="true" class="header-anchor">#</a> getPanelsEl</h2><p>Returns panels element</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<svg xmlns="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"><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></a></strong></p><h2 id="addpanel"><a href="#addpanel" aria-hidden="true" class="header-anchor">#</a> addPanel</h2><p>Add new panel to the collection</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>panel</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a> | Panel)</strong> Object with right properties or an instance of Panel</li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> newPanel <span class="token operator">=</span> panelManager<span class="token punctuation">.</span><span class="token function">addPanel</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'myNewPanel'</span><span class="token punctuation">,</span> |
|||
visible <span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
|||
buttons <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>Returns <strong>Panel</strong> Added panel. Useful in case passed argument was an Object</p><h2 id="removepanel"><a href="#removepanel" aria-hidden="true" class="header-anchor">#</a> removePanel</h2><p>Remove a panel from the collection</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>panel</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a> | Panel | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a>)</strong> Object with right properties or an instance of Panel or Painel id</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> newPanel <span class="token operator">=</span> panelManager<span class="token punctuation">.</span><span class="token function">removePanel</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'myNewPanel'</span><span class="token punctuation">,</span> |
|||
visible <span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
|||
buttons <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> |
|||
|
|||
<span class="token keyword">const</span> newPanel <span class="token operator">=</span> panelManager<span class="token punctuation">.</span><span class="token function">removePanel</span><span class="token punctuation">(</span><span class="token string">'myNewPanel'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>Panel</strong> Removed panel. Useful in case passed argument was an Object</p><h2 id="getpanel"><a href="#getpanel" aria-hidden="true" class="header-anchor">#</a> getPanel</h2><p>Get panel by ID</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Id string</li></ul><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> myPanel <span class="token operator">=</span> panelManager<span class="token punctuation">.</span><span class="token function">getPanel</span><span class="token punctuation">(</span><span class="token string">'myNewPanel'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>(Panel | null)</strong></p><h2 id="addbutton"><a href="#addbutton" aria-hidden="true" class="header-anchor">#</a> addButton</h2><p>Add button to the panel</p><h3 id="parameters-4"><a href="#parameters-4" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>panelId</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Panel's ID</li><li><code>button</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a> | Button)</strong> Button object or instance of Button</li></ul><h3 id="examples-4"><a href="#examples-4" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> newButton <span class="token operator">=</span> panelManager<span class="token punctuation">.</span><span class="token function">addButton</span><span class="token punctuation">(</span><span class="token string">'myNewPanel'</span><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'myNewButton'</span><span class="token punctuation">,</span> |
|||
className<span class="token punctuation">:</span> <span class="token string">'someClass'</span><span class="token punctuation">,</span> |
|||
command<span class="token punctuation">:</span> <span class="token string">'someCommand'</span><span class="token punctuation">,</span> |
|||
attributes<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Some title'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
active<span class="token punctuation">:</span> <span class="token boolean">false</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">// It's also possible to pass the command as an object</span> |
|||
<span class="token comment">// with .run and .stop methods</span> |
|||
<span class="token operator">...</span> |
|||
command<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
run<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>editor<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> |
|||
stop<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>editor<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 comment">// Or simply like a function which will be evaluated as a single .run command</span> |
|||
<span class="token operator">...</span> |
|||
command<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token operator">...</span> |
|||
<span class="token punctuation">}</span> |
|||
</code></pre></div><p>Returns <strong>(Button | null)</strong> Added button. Useful in case passed button was an Object</p><h2 id="removebutton"><a href="#removebutton" aria-hidden="true" class="header-anchor">#</a> removeButton</h2><p>Remove button from the panel</p><h3 id="parameters-5"><a href="#parameters-5" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>panelId</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a></strong> Panel's ID</li><li><code>button</code></li><li><code>buttonId</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a></strong> Button's ID</li></ul><h3 id="examples-5"><a href="#examples-5" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> removedButton <span class="token operator">=</span> panelManager<span class="token punctuation">.</span><span class="token function">addButton</span><span class="token punctuation">(</span><span class="token string">'myNewPanel'</span><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'myNewButton'</span><span class="token punctuation">,</span> |
|||
className<span class="token punctuation">:</span> <span class="token string">'someClass'</span><span class="token punctuation">,</span> |
|||
command<span class="token punctuation">:</span> <span class="token string">'someCommand'</span><span class="token punctuation">,</span> |
|||
attributes<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Some title'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
active<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
|
|||
<span class="token keyword">const</span> removedButton <span class="token operator">=</span> panelManager<span class="token punctuation">.</span><span class="token function">removeButton</span><span class="token punctuation">(</span><span class="token string">'myNewPanel'</span><span class="token punctuation">,</span> <span class="token string">'myNewButton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>(Button | null)</strong> Removed button.</p><h2 id="getbutton"><a href="#getbutton" aria-hidden="true" class="header-anchor">#</a> getButton</h2><p>Get button from the panel</p><h3 id="parameters-6"><a href="#parameters-6" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>panelId</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Panel's ID</li><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Button's ID</li></ul><h3 id="examples-6"><a href="#examples-6" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> button <span class="token operator">=</span> panelManager<span class="token punctuation">.</span><span class="token function">getButton</span><span class="token punctuation">(</span><span class="token string">'myPanel'</span><span class="token punctuation">,</span><span class="token string">'myButton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>(Button | null)</strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/panels.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">11/22/2018, 7:37:29 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/api/component.html" class="prev"> |
|||
- Component |
|||
</a></span><span class="next"><a href="/docs/api/style_manager.html"> |
|||
Style Manager |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/25.32714364.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,79 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/26.0ba924f8.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="active sidebar-link">Rich Text Editor</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#richtexteditor" class="sidebar-link">RichTextEditor</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#gettoolbarel" class="sidebar-link">getToolbarEl</a></li></ul></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="richtexteditor"><a href="#richtexteditor" aria-hidden="true" class="header-anchor">#</a> RichTextEditor</h2><p>This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand" target="_blank" rel="noopener noreferrer">HTML Editing APIs<svg xmlns="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"><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></a>. |
|||
It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="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"><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></a></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> |
|||
rte<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// options</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> rte <span class="token operator">=</span> editor<span class="token punctuation">.</span>RichTextEditor<span class="token punctuation">;</span> |
|||
</code></pre></div><ul><li><a href="#add">add</a></li><li><a href="#get">get</a></li><li><a href="#getall">getAll</a></li><li><a href="#remove">remove</a></li><li><a href="#gettoolbarel">getToolbarEl</a></li></ul><h2 id="add"><a href="#add" aria-hidden="true" class="header-anchor">#</a> add</h2><p>Add a new action to the built-in RTE toolbar</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Action name</li><li><code>action</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Action options (optional, default <code>{}</code>)</li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>rte<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'bold'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
icon<span class="token punctuation">:</span> <span class="token string">'<b>B</b>'</span><span class="token punctuation">,</span> |
|||
attributes<span class="token punctuation">:</span> <span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Bold'</span><span class="token punctuation">,</span><span class="token punctuation">}</span> |
|||
result<span class="token punctuation">:</span> rte <span class="token operator">=></span> rte<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token string">'bold'</span><span class="token punctuation">)</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
rte<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'link'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
icon<span class="token punctuation">:</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'t'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
|||
attributes<span class="token punctuation">:</span> <span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Link'</span><span class="token punctuation">,</span><span class="token punctuation">}</span> |
|||
<span class="token comment">// Example on it's easy to wrap a selected content</span> |
|||
result<span class="token punctuation">:</span> rte <span class="token operator">=></span> rte<span class="token punctuation">.</span><span class="token function">insertHTML</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`<a href="#"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>rte<span class="token punctuation">.</span><span class="token function">selection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></a>`</span></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">// An example with fontSize</span> |
|||
rte<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'fontSize'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
icon<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`<select class="gjs-field"> |
|||
<option>1</option> |
|||
<option>4</option> |
|||
<option>7</option> |
|||
</select>`</span></span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Bind the 'result' on 'change' listener</span> |
|||
event<span class="token punctuation">:</span> <span class="token string">'change'</span><span class="token punctuation">,</span> |
|||
result<span class="token punctuation">:</span> <span class="token punctuation">(</span>rte<span class="token punctuation">,</span> action<span class="token punctuation">)</span> <span class="token operator">=></span> rte<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token string">'fontSize'</span><span class="token punctuation">,</span> action<span class="token punctuation">.</span>btn<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Callback on any input change (mousedown, keydown, etc..)</span> |
|||
update<span class="token punctuation">:</span> <span class="token punctuation">(</span>rte<span class="token punctuation">,</span> action<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">const</span> value <span class="token operator">=</span> rte<span class="token punctuation">.</span>doc<span class="token punctuation">.</span><span class="token function">queryCommandValue</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">!=</span> <span class="token string">'false'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// value is a string</span> |
|||
action<span class="token punctuation">.</span>btn<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>value <span class="token operator">=</span> value<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="get"><a href="#get" aria-hidden="true" class="header-anchor">#</a> get</h2><p>Get the action by its name</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong> Action name</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> action <span class="token operator">=</span> rte<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'bold'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// {name: 'bold', ...}</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong></p><h2 id="getall"><a href="#getall" aria-hidden="true" class="header-anchor">#</a> getAll</h2><p>Get all actions</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<svg xmlns="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"><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></a></strong></p><h2 id="remove"><a href="#remove" aria-hidden="true" class="header-anchor">#</a> remove</h2><p>Remove the action from the toolbar</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a></strong></li></ul><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> action <span class="token operator">=</span> rte<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'bold'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// {name: 'bold', ...}</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Removed action</p><h2 id="gettoolbarel"><a href="#gettoolbarel" aria-hidden="true" class="header-anchor">#</a> getToolbarEl</h2><p>Get the toolbar element</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<svg xmlns="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"><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></a></strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/rich_text_editor.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/8/2018, 11:53:31 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/api/modal_dialog.html" class="prev"> |
|||
Modal |
|||
</a></span><span class="next"><a href="/docs/api/keymaps.html"> |
|||
Keymaps |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/26.0ba924f8.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,68 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/27.442eb105.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="active sidebar-link">Selector Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#selectormanager" class="sidebar-link">SelectorManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#addclass" class="sidebar-link">addClass</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#getall" class="sidebar-link">getAll</a></li></ul></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="selectormanager"><a href="#selectormanager" aria-hidden="true" class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take |
|||
a look at this code:</p><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">span > #send-btn.btn</span><span class="token punctuation">{</span> |
|||
... |
|||
<span class="token punctuation">}</span> |
|||
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>send-btn<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn<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>button</span><span class="token punctuation">></span></span> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> |
|||
</code></pre></div><p>In this scenario we get:</p><ul><li>span -> selector of type <code>tag</code></li><li>send-btn -> selector of type <code>id</code></li><li>btn -> selector of type <code>class</code></li></ul><p>So, for example, being <code>btn</code> the same class entity it'll be easier to refactor and track things.</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="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"><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></a></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> |
|||
selectorManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// options</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> selectorManager <span class="token operator">=</span> editor<span class="token punctuation">.</span>SelectorManager<span class="token punctuation">;</span> |
|||
</code></pre></div><ul><li><a href="#getconfig">getConfig</a></li><li><a href="#add">add</a></li><li><a href="#addclass">addClass</a></li><li><a href="#get">get</a></li><li><a href="#getAll">getAll</a></li></ul><h2 id="getconfig"><a href="#getconfig" aria-hidden="true" class="header-anchor">#</a> getConfig</h2><p>Get configuration object</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong></p><h2 id="add"><a href="#add" aria-hidden="true" class="header-anchor">#</a> add</h2><p>Add a new selector to collection if it's not already exists. Class type is a default one</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<svg xmlns="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"><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></a>)</strong> Selector/s name</li><li><code>opts</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Selector options (optional, default <code>{}</code>) |
|||
<ul><li><code>opts.label</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a></strong> Label for the selector, if it's not provided the label will be the same as the name (optional, default <code>''</code>)</li><li><code>opts.type</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a></strong> Type of the selector. At the moment, only 'class' (1) is available (optional, default <code>1</code>)</li></ul></li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> selector <span class="token operator">=</span> selectorManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'selectorName'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// Same as</span> |
|||
<span class="token keyword">const</span> selector <span class="token operator">=</span> selectorManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'selectorName'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'selectorName'</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// Multiple selectors</span> |
|||
<span class="token keyword">const</span> selectors <span class="token operator">=</span> selectorManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'.class1'</span><span class="token punctuation">,</span> <span class="token string">'.class2'</span><span class="token punctuation">,</span> <span class="token string">'#id1'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>(Model | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<svg xmlns="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"><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></a>)</strong></p><h2 id="addclass"><a href="#addclass" aria-hidden="true" class="header-anchor">#</a> addClass</h2><p>Add class selectors</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>classes</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<svg xmlns="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"><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></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="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"><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></a>)</strong> Array or string of classes</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>sm<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'class1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
sm<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'class1 class2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
sm<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'class1'</span><span class="token punctuation">,</span> <span class="token string">'class2'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// -> [SelectorObject, ...]</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<svg xmlns="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"><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></a></strong> Array of added selectors</p><h2 id="get"><a href="#get" aria-hidden="true" class="header-anchor">#</a> get</h2><p>Get the selector by its name</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<svg xmlns="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"><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></a>)</strong> Selector name</li><li><code>type</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="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"><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></a></strong> Selector type</li></ul><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> selector <span class="token operator">=</span> selectorManager<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'selectorName'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// or get an array</span> |
|||
<span class="token keyword">const</span> selectors <span class="token operator">=</span> selectorManager<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'class1'</span><span class="token punctuation">,</span> <span class="token string">'class2'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>(Model | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<svg xmlns="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"><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></a>)</strong></p><h2 id="getall"><a href="#getall" aria-hidden="true" class="header-anchor">#</a> getAll</h2><p>Get all selectors</p><p>Returns <strong>Collection</strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/selector_manager.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">4/9/2019, 10:02:45 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/api/device_manager.html" class="prev"> |
|||
Device Manager |
|||
</a></span><span class="next"><a href="/docs/api/css_composer.html"> |
|||
CSS Composer |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/27.442eb105.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,55 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/30.331e996f.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 router-link-active">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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="active sidebar-link">Undo Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#undomanager" class="sidebar-link">UndoManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#removeall" class="sidebar-link">removeAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#start" class="sidebar-link">start</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#stop" class="sidebar-link">stop</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#undo" class="sidebar-link">undo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#undoall" class="sidebar-link">undoAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#redo" class="sidebar-link">redo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#redoall" class="sidebar-link">redoAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#hasundo" class="sidebar-link">hasUndo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#hasredo" class="sidebar-link">hasRedo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#getstack" class="sidebar-link">getStack</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#clear" class="sidebar-link">clear</a></li></ul></li></ul></div><div class="page"><div class="content"><h2 id="undomanager"><a href="#undomanager" aria-hidden="true" class="header-anchor">#</a> UndoManager</h2><p>This module allows to manage the stack of changes applied in canvas. |
|||
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> um <span class="token operator">=</span> editor<span class="token punctuation">.</span>UndoManager<span class="token punctuation">;</span> |
|||
</code></pre></div><ul><li><a href="#getconfig">getConfig</a></li><li><a href="#add">add</a></li><li><a href="#remove">remove</a></li><li><a href="#removeall">removeAll</a></li><li><a href="#start">start</a></li><li><a href="#stop">stop</a></li><li><a href="#undo">undo</a></li><li><a href="#undoall">undoAll</a></li><li><a href="#redo">redo</a></li><li><a href="#redoall">redoAll</a></li><li><a href="#hasundo">hasUndo</a></li><li><a href="#hasredo">hasRedo</a></li><li><a href="#getstack">getStack</a></li><li><a href="#clear">clear</a></li></ul><h2 id="getconfig"><a href="#getconfig" aria-hidden="true" class="header-anchor">#</a> getConfig</h2><p>Get module configurations</p><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> config <span class="token operator">=</span> um<span class="token punctuation">.</span><span class="token function">getConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// { ... }</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="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"><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></a></strong> Configuration object</p><h2 id="add"><a href="#add" aria-hidden="true" class="header-anchor">#</a> add</h2><p>Add an entity (Model/Collection) to track |
|||
Note: New Components and CSSRules will be added automatically</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>entity</code><strong>(Model | Collection)</strong> Entity to track</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>someModelOrCollection<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="remove"><a href="#remove" aria-hidden="true" class="header-anchor">#</a> remove</h2><p>Remove and stop tracking the entity (Model/Collection)</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>entity</code><strong>(Model | Collection)</strong> Entity to remove</li></ul><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span>someModelOrCollection<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="removeall"><a href="#removeall" aria-hidden="true" class="header-anchor">#</a> removeAll</h2><p>Remove all entities</p><h3 id="examples-4"><a href="#examples-4" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">removeAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="start"><a href="#start" aria-hidden="true" class="header-anchor">#</a> start</h2><p>Start/resume tracking changes</p><h3 id="examples-5"><a href="#examples-5" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="stop"><a href="#stop" aria-hidden="true" class="header-anchor">#</a> stop</h2><p>Stop tracking changes</p><h3 id="examples-6"><a href="#examples-6" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="undo"><a href="#undo" aria-hidden="true" class="header-anchor">#</a> undo</h2><p>Undo last change</p><h3 id="examples-7"><a href="#examples-7" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">undo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="undoall"><a href="#undoall" aria-hidden="true" class="header-anchor">#</a> undoAll</h2><p>Undo all changes</p><h3 id="examples-8"><a href="#examples-8" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">undoAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="redo"><a href="#redo" aria-hidden="true" class="header-anchor">#</a> redo</h2><p>Redo last change</p><h3 id="examples-9"><a href="#examples-9" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">redo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="redoall"><a href="#redoall" aria-hidden="true" class="header-anchor">#</a> redoAll</h2><p>Redo all changes</p><h3 id="examples-10"><a href="#examples-10" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">redoAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="hasundo"><a href="#hasundo" aria-hidden="true" class="header-anchor">#</a> hasUndo</h2><p>Checks if exists an available undo</p><h3 id="examples-11"><a href="#examples-11" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">hasUndo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="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"><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></a></strong></p><h2 id="hasredo"><a href="#hasredo" aria-hidden="true" class="header-anchor">#</a> hasRedo</h2><p>Checks if exists an available redo</p><h3 id="examples-12"><a href="#examples-12" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">hasRedo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="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"><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></a></strong></p><h2 id="getstack"><a href="#getstack" aria-hidden="true" class="header-anchor">#</a> getStack</h2><p>Get stack of changes</p><h3 id="examples-13"><a href="#examples-13" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> stack <span class="token operator">=</span> um<span class="token punctuation">.</span><span class="token function">getStack</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
stack<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span>item <span class="token operator">=></span> <span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>Collection</strong></p><h2 id="clear"><a href="#clear" aria-hidden="true" class="header-anchor">#</a> clear</h2><p>Clear the stack</p><h3 id="examples-14"><a href="#examples-14" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>um<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Returns <strong>this</strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/undo_manager.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/9/2018, 12:11:12 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/api/keymaps.html" class="prev"> |
|||
Keymaps |
|||
</a></span><!----></p></div></div></div></div> |
|||
<script src="/docs/assets/js/30.331e996f.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,33 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>Faq | GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/31.456da170.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><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/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/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="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></div></li></ul></div><div class="page"><div class="content"><h1 id="faq"><a href="#faq" aria-hidden="true" class="header-anchor">#</a> FAQ</h1><p>Coming soon</p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/faq.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/9/2018, 12:48:25 AM</span></div></div><!----></div></div></div> |
|||
<script src="/docs/assets/js/31.456da170.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,584 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>Getting Started | GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
<meta name="keywords" content="grapesjs getting started"> |
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/32.2f2eecfd.js" as="script"><link rel="preload" href="/docs/assets/js/10.a106a5cd.js" as="script"><link rel="preload" href="/docs/assets/js/3.651320c9.js" as="script"><link rel="preload" href="/docs/assets/js/2.434af1ad.js" as="script"><link rel="preload" href="/docs/assets/js/4.ccc41891.js" as="script"><link rel="preload" href="/docs/assets/js/6.9af8fc3b.js" as="script"><link rel="preload" href="/docs/assets/js/7.224c3fec.js" as="script"><link rel="preload" href="/docs/assets/js/9.9f34d8b5.js" as="script"><link rel="preload" href="/docs/assets/js/5.20d1ecdf.js" as="script"><link rel="preload" href="/docs/assets/js/8.e9d59c3e.js" as="script"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css"> |
|||
</head> |
|||
<body> |
|||
<div id="app" data-server-rendered="true"><div class="theme-container page__getting-started"><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" 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="active sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/getting-started.html#import-the-library" class="sidebar-link">Import the library</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#start-from-the-canvas" class="sidebar-link">Start from the canvas</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#add-blocks" class="sidebar-link">Add Blocks</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#define-components" class="sidebar-link">Define Components</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#panels-buttons" class="sidebar-link">Panels & Buttons</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#layers" class="sidebar-link">Layers</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#style-manager" class="sidebar-link">Style Manager</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#traits" class="sidebar-link">Traits</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#responsive-templates" class="sidebar-link">Responsive templates</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#store-load-data" class="sidebar-link">Store & load data</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#theming" class="sidebar-link">Theming</a></li></ul></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><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/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/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="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></div></li></ul></div><div class="page"><div class="content"><h1 id="getting-started"><a href="#getting-started" aria-hidden="true" class="header-anchor">#</a> Getting Started</h1><p>This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the <a href="#final-result">final result</a></p><h2 id="import-the-library"><a href="#import-the-library" aria-hidden="true" class="header-anchor">#</a> Import the library</h2><p>Before you start using GrapesJS, you'll have to import it. Let's import the latest version</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>//unpkg.com/grapesjs/dist/css/grapes.min.css<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>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>//unpkg.com/grapesjs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
|||
<span class="token comment"><!-- |
|||
If you need plugins, put them below the main grapesjs script |
|||
<script src="/path/to/some/plugin.min.js"></script> |
|||
--></span> |
|||
</code></pre></div><p>or if you're in a Node environment</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token string">'grapesjs/dist/css/grapes.min.css'</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">import</span> grapesjs <span class="token keyword">from</span> <span class="token string">'grapesjs'</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// If you need plugins, put them below the main grapesjs script</span> |
|||
<span class="token comment">// import 'grapesjs-some-plugin';</span> |
|||
</code></pre></div><h2 id="start-from-the-canvas"><a href="#start-from-the-canvas" aria-hidden="true" class="header-anchor">#</a> Start from the canvas</h2><p>The first step is to define the interface of our editor. For this purpose we gonna start with basic HTML layouts. Finding a common structure for the UI of any project is not an easy task. That's why GrapesJS prefers to keep this process as simple as possible. We provide a few helpers, but let the user define the interface. This guarantees maximum flexibility. |
|||
The main part of the GrapesJS editor is the canvas, this is where you create the structure of your templates and you can't miss it. Let's try to initiate the editor with the canvas and no panels.</p><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">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gjs<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>h1</span><span class="token punctuation">></span></span>Hello World Component!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</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><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">// Indicate where to init the editor. You can also pass an HTMLElement</span> |
|||
container<span class="token punctuation">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Get the content for the canvas directly from the element</span> |
|||
<span class="token comment">// As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,</span> |
|||
fromElement<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Size of the editor</span> |
|||
height<span class="token punctuation">:</span> <span class="token string">'300px'</span><span class="token punctuation">,</span> |
|||
width<span class="token punctuation">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Disable the storage manager for the moment</span> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Avoid any default panel</span> |
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> defaults<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><span class="token punctuation">;</span> |
|||
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Let's highlight canvas boundaries */</span> |
|||
<span class="token selector">#gjs</span> <span class="token punctuation">{</span> |
|||
<span class="token property">border</span><span class="token punctuation">:</span> 3px solid #444<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
|
|||
<span class="token comment">/* Reset some default styling */</span> |
|||
<span class="token selector">.gjs-cv-canvas</span> <span class="token punctuation">{</span> |
|||
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> |
|||
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> |
|||
<span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
</code></pre></div><div class="demo-container" data-v-b3715568><div id="gjs"><h1>Hello World Component!</h1></div></div><p>With just the canvas you're already able to move, copy and delete components from the structure. For now, we see the example template taken from the container. Next let's look at how to create and drag custom blocks into our canvas.</p><h2 id="add-blocks"><a href="#add-blocks" aria-hidden="true" class="header-anchor">#</a> Add Blocks</h2><p>The block in GrapesJS is just a reusable piece of HTML that you can drop in the canvas. A block can be an image, a button, or an entire section with videos, forms and iframes. Let's start by creating another container and append a few basic blocks inside of it. Later we can use this technique to build more complex structures.</p><div class="language-html extra-class"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br></div><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">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gjs<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blocks<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><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> |
|||
blockManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
appendTo<span class="token punctuation">:</span> <span class="token string">'#blocks'</span><span class="token punctuation">,</span> |
|||
blocks<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'section'</span><span class="token punctuation">,</span> <span class="token comment">// id is mandatory</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'<b>Section</b>'</span><span class="token punctuation">,</span> <span class="token comment">// You can use HTML/SVG inside labels</span> |
|||
attributes<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token punctuation">:</span><span class="token string">'gjs-block-section'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
content<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`<section> |
|||
<h1>This is a simple title</h1> |
|||
<div>This is just a Lorem text: Lorem ipsum dolor sit amet</div> |
|||
</section>`</span></span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Text'</span><span class="token punctuation">,</span> |
|||
content<span class="token punctuation">:</span> <span class="token string">'<div data-gjs-type="text">Insert your text here</div>'</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Image'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Select the component once it's dropped</span> |
|||
select<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// You can pass components as a JSON instead of a simple HTML string,</span> |
|||
<span class="token comment">// in this case we also use a defined component type `image`</span> |
|||
content<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'image'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// This triggers `active` event on dropped components and the `image`</span> |
|||
<span class="token comment">// reacts by opening the AssetManager</span> |
|||
activate<span class="token punctuation">:</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><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.gjs-block</span> <span class="token punctuation">{</span> |
|||
<span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> |
|||
<span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> |
|||
<span class="token property">min-height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
</code></pre></div><div class="demo-container" data-v-b3715568><div><div id="gjs2" class="gjs"><h1>Hello World Component!</h1></div><div id="blocks2"></div></div></div><p>As you can see we add our blocks via the initial configuration. Obviously there might be a case in which you would like to add them dynamically, in this case you have to use the <a href="/docs/api/block_manager.html">Block Manager API</a></p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'my-block-id'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span> |
|||
category<span class="token punctuation">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>If you want to learn more about blocks we suggest to read its dedicated article: <a href="/docs/modules/Blocks.html">Block Manager Module</a></p></div><h2 id="define-components"><a href="#define-components" aria-hidden="true" class="header-anchor">#</a> Define Components</h2><p>Technically, once you drop your HTML block inside the canvas each element of the content is transformed into a GrapesJS Component. A GrapesJS Component is an object containing information about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected in the View. Therefore, if you add a new attribute to the model, it will be available in the export code (which we will learn more about later), and the element you see in the canvas will be updated with new attributes. |
|||
This isn't totally out of the ordinary, but the unique thing about Components that you can create a totally decoupled View. This means you can show the user whatever you desire regardless of what is in the Model. For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If you want to learn more about Custom Components, you should check out <a href="/docs/modules/Components.html">Component Manager Module</a>.</p><p>GrapesJS comes with a few <a href="/docs/modules/Components.html#built-in-components">built-in Components</a> that enable different features once rendered in the canvas. For example, by double clicking on an image component you will see the default <a href="/docs/modules/Assets.html">Asset Manager</a>, which you can customize or integrate you own. By double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customization and <a href="/docs/guides/Replace-Rich-Text-Editor.html">replaceable</a>.</p><p>As we have seen before you can create Blocks directly as Components</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'my-block-id'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// ...</span> |
|||
content<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
tagName<span class="token punctuation">:</span> <span class="token string">'div'</span><span class="token punctuation">,</span> |
|||
draggable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
|||
attributes<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token string">'some-attribute'</span><span class="token punctuation">:</span> <span class="token string">'some-value'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
components<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
tagName<span class="token punctuation">:</span> <span class="token string">'span'</span><span class="token punctuation">,</span> |
|||
content<span class="token punctuation">:</span> <span class="token string">'<b>Some static content</b>'</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
tagName<span class="token punctuation">:</span> <span class="token string">'div'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// use `content` for static strings, `components` string will be parsed</span> |
|||
<span class="token comment">// and transformed in Components</span> |
|||
components<span class="token punctuation">:</span> <span class="token string">'<span>HTML at some point</span>'</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><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Check out the <a href="/docs/api/components.html">Components API</a> to learn how to interact with components dynamically</p></div><p>An example on how to select some inner component and replace its children with new contents</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// The wrapper is the root Component</span> |
|||
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> editor<span class="token punctuation">.</span>DomComponents<span class="token punctuation">.</span><span class="token function">getWrapper</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">const</span> myComponent <span class="token operator">=</span> wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'div.my-component'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
|||
myComponent<span class="token punctuation">.</span><span class="token function">components</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>component <span class="token operator">=></span> <span class="token comment">/* ... do something ... */</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
myComponent<span class="token punctuation">.</span><span class="token function">components</span><span class="token punctuation">(</span><span class="token string">'<div>New content</div>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><h2 id="panels-buttons"><a href="#panels-buttons" aria-hidden="true" class="header-anchor">#</a> Panels & Buttons</h2><p>Now that we have a canvas and custom blocks let's see how to create a new custom panel with some buttons inside (using <a href="/docs/api/panels.html">Panels API</a>) which trigger commands (the core one or custom).</p><div class="language-html extra-class"><div class="highlight-lines"><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br></div><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">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__top<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__basic-actions<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gjs<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blocks<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><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.panel__top</span> <span class="token punctuation">{</span> |
|||
<span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> |
|||
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> |
|||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> |
|||
<span class="token property">position</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> |
|||
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
|||
<span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token selector">.panel__basic-actions</span> <span class="token punctuation">{</span> |
|||
<span class="token property">position</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>Panels<span class="token punctuation">.</span><span class="token function">addPanel</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'panel-top'</span><span class="token punctuation">,</span> |
|||
el<span class="token punctuation">:</span> <span class="token string">'.panel__top'</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>Panels<span class="token punctuation">.</span><span class="token function">addPanel</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'basic-actions'</span><span class="token punctuation">,</span> |
|||
el<span class="token punctuation">:</span> <span class="token string">'.panel__basic-actions'</span><span class="token punctuation">,</span> |
|||
buttons<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'visibility'</span><span class="token punctuation">,</span> |
|||
active<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// active by default</span> |
|||
className<span class="token punctuation">:</span> <span class="token string">'btn-toggle-borders'</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'<u>B</u>'</span><span class="token punctuation">,</span> |
|||
command<span class="token punctuation">:</span> <span class="token string">'sw-visibility'</span><span class="token punctuation">,</span> <span class="token comment">// Built-in command</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'export'</span><span class="token punctuation">,</span> |
|||
className<span class="token punctuation">:</span> <span class="token string">'btn-open-export'</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Exp'</span><span class="token punctuation">,</span> |
|||
command<span class="token punctuation">:</span> <span class="token string">'export-template'</span><span class="token punctuation">,</span> |
|||
context<span class="token punctuation">:</span> <span class="token string">'export-template'</span><span class="token punctuation">,</span> <span class="token comment">// For grouping context of buttons from the same panel</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'show-json'</span><span class="token punctuation">,</span> |
|||
className<span class="token punctuation">:</span> <span class="token string">'btn-show-json'</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'JSON'</span><span class="token punctuation">,</span> |
|||
context<span class="token punctuation">:</span> <span class="token string">'show-json'</span><span class="token punctuation">,</span> |
|||
<span class="token function">command</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
editor<span class="token punctuation">.</span>Modal<span class="token punctuation">.</span><span class="token function">setTitle</span><span class="token punctuation">(</span><span class="token string">'Components JSON'</span><span class="token punctuation">)</span> |
|||
<span class="token punctuation">.</span><span class="token function">setContent</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`<textarea style="width:100%; height: 250px;"> |
|||
</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>editor<span class="token punctuation">.</span><span class="token function">getComponents</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> |
|||
</textarea>`</span></span><span class="token punctuation">)</span> |
|||
<span class="token punctuation">.</span><span class="token function">open</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><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><div class="demo-container" data-v-b3715568><div><div id="panel__top3" class="panel__top"><div id="panel__basic-actions3" class="panel__basic-actions"></div></div><div id="gjs3" class="gjs"><h1>Hello World Component!</h1></div><div id="blocks3"></div></div></div><p>We have defined where to render the panel with <code>el: '#basic-panel'</code> and then for each button we added a <code>command</code> property. The command could be the id, an object with <code>run</code> and <code>stop</code> functions or simply a single function. |
|||
Try to use <a href="/docs/api/commands.html">Commands</a> when possible, they allow you to track actions globally. Commands also execute callbacks before and after their execution (you can even interrupt them).</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'run:export-template:before'</span><span class="token punctuation">,</span> opts <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Before the command run'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token number">0</span> <span class="token comment">/* some condition */</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
opts<span class="token punctuation">.</span>abort <span class="token operator">=</span> <span class="token number">1</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">'run:export-template'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'After the command run'</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">'abort:export-template'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Command aborted'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Check out the <a href="/docs/api/panels.html">Panels API</a> to see all the available methods</p></div><h2 id="layers"><a href="#layers" aria-hidden="true" class="header-anchor">#</a> Layers</h2><p>Another utility tool you might find useful when working with web elements is the layer manger. It's a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it</p><div class="language-html extra-class"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br></div><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">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__top<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__basic-actions<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editor-row<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editor-canvas<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 attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gjs<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__right<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layers-container<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blocks<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><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.editor-row</span> <span class="token punctuation">{</span> |
|||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> |
|||
<span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> |
|||
<span class="token property">align-items</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span> |
|||
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> |
|||
<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
|
|||
<span class="token selector">.editor-canvas</span> <span class="token punctuation">{</span> |
|||
<span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
|
|||
<span class="token selector">.panel__right</span> <span class="token punctuation">{</span> |
|||
<span class="token property">flex-basis</span><span class="token punctuation">:</span> 230px<span class="token punctuation">;</span> |
|||
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> |
|||
<span class="token property">overflow-y</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
</code></pre></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 comment">// ...</span> |
|||
layerManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
appendTo<span class="token punctuation">:</span> <span class="token string">'.layers-container'</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// We define a default panel as a sidebar to contain layers</span> |
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'layers'</span><span class="token punctuation">,</span> |
|||
el<span class="token punctuation">:</span> <span class="token string">'.panel__right'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Make the panel resizable</span> |
|||
resizable<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
maxDim<span class="token punctuation">:</span> <span class="token number">350</span><span class="token punctuation">,</span> |
|||
minDim<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> |
|||
tc<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// Top handler</span> |
|||
cl<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// Left handler</span> |
|||
cr<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// Right handler</span> |
|||
bc<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// Bottom handler</span> |
|||
<span class="token comment">// Being a flex child we need to change `flex-basis` property</span> |
|||
<span class="token comment">// instead of the `width` (default)</span> |
|||
keyWidth<span class="token punctuation">:</span> <span class="token string">'flex-basis'</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><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><div class="demo-container" data-v-b3715568><div><div id="panel__top4" class="panel__top"><div id="panel__basic-actions4" class="panel__basic-actions"></div></div><div class="editor-row"><div class="editor-canvas"><div id="gjs4" class="gjs"><h1>Hello World Component!</h1></div></div><div id="panel__right4" class="panel__right"><div id="layers-container"></div></div></div><div id="blocks4"></div></div></div><h2 id="style-manager"><a href="#style-manager" aria-hidden="true" class="header-anchor">#</a> Style Manager</h2><p>Once you have defined the structure of the template the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.</p><p>Let's start by adding one more panel inside the <code>panel__right</code> and another one in <code>panel__top</code> which will contain a Layer/Style Manager switcher</p><div class="language-html extra-class"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><div class="highlighted"> </div><br><br><br></div><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">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__top<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__basic-actions<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__switcher<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__right<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layers-container<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>styles-container<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
|||
... |
|||
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.panel__switcher</span> <span class="token punctuation">{</span> |
|||
<span class="token property">position</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
</code></pre></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 comment">// ...</span> |
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'panel-switcher'</span><span class="token punctuation">,</span> |
|||
el<span class="token punctuation">:</span> <span class="token string">'.panel__switcher'</span><span class="token punctuation">,</span> |
|||
buttons<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'show-layers'</span><span class="token punctuation">,</span> |
|||
active<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Layers'</span><span class="token punctuation">,</span> |
|||
command<span class="token punctuation">:</span> <span class="token string">'show-layers'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Once activated disable the possibility to turn it off</span> |
|||
togglable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'show-style'</span><span class="token punctuation">,</span> |
|||
active<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Styles'</span><span class="token punctuation">,</span> |
|||
command<span class="token punctuation">:</span> <span class="token string">'show-styles'</span><span class="token punctuation">,</span> |
|||
togglable<span class="token punctuation">:</span> <span class="token boolean">false</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><span class="token punctuation">,</span> |
|||
<span class="token comment">// The Selector Manager allows to assign classes and</span> |
|||
<span class="token comment">// different states (eg. :hover) on components.</span> |
|||
<span class="token comment">// Generally, it's used in conjunction with Style Manager</span> |
|||
<span class="token comment">// but it's not mandatory</span> |
|||
selectorManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
appendTo<span class="token punctuation">:</span> <span class="token string">'.styles-container'</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
styleManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
appendTo<span class="token punctuation">:</span> <span class="token string">'.styles-container'</span><span class="token punctuation">,</span> |
|||
sectors<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Dimension'</span><span class="token punctuation">,</span> |
|||
open<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Use built-in properties</span> |
|||
buildProps<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token string">'min-height'</span><span class="token punctuation">,</span> <span class="token string">'padding'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Use `properties` to define/override single property</span> |
|||
properties<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
<span class="token comment">// Type of the input,</span> |
|||
<span class="token comment">// options: integer | radio | select | color | slider | file | composite | stack</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'The width'</span><span class="token punctuation">,</span> <span class="token comment">// Label for the property</span> |
|||
property<span class="token punctuation">:</span> <span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token comment">// CSS property (if buildProps contains it will be extended)</span> |
|||
units<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span> <span class="token string">'%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Units, available only for 'integer' types</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> <span class="token comment">// Default value</span> |
|||
min<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// Min value, available only for 'integer' types</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> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Extra'</span><span class="token punctuation">,</span> |
|||
open<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
|||
buildProps<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'background-color'</span><span class="token punctuation">,</span> <span class="token string">'box-shadow'</span><span class="token punctuation">,</span> <span class="token string">'custom-prop'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
properties<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'custom-prop'</span><span class="token punctuation">,</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Custom Label'</span><span class="token punctuation">,</span> |
|||
property<span class="token punctuation">:</span> <span class="token string">'font-size'</span><span class="token punctuation">,</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token string">'32px'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// List of options, available only for 'select' and 'radio' types</span> |
|||
options<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">'12px'</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Tiny'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">'18px'</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Medium'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">'32px'</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Big'</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><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">// Define commands</span> |
|||
editor<span class="token punctuation">.</span>Commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'show-layers'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token function">getRowEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> editor<span class="token punctuation">.</span><span class="token function">getContainer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">'.editor-row'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token function">getLayersEl</span><span class="token punctuation">(</span>row<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> row<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.layers-container'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token function">run</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> sender<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">const</span> lmEl <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getLayersEl</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRowEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
lmEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <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 function">stop</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> sender<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">const</span> lmEl <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getLayersEl</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRowEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
lmEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</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>Commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'show-styles'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token function">getRowEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> editor<span class="token punctuation">.</span><span class="token function">getContainer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">'.editor-row'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token function">getStyleEl</span><span class="token punctuation">(</span>row<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> row<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.styles-container'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token function">run</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> sender<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">const</span> smEl <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getStyleEl</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRowEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
smEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <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 function">stop</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> sender<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">const</span> smEl <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getStyleEl</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRowEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
smEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</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><div class="demo-container" data-v-b3715568><div><div id="panel__top5" class="panel__top"><div id="panel__basic-actions5" class="panel__basic-actions"></div><div id="panel__switcher5" class="panel__switcher"></div></div><div class="editor-row"><div class="editor-canvas"><div id="gjs5" class="gjs"><h1>Hello World Component!</h1></div></div><div id="panel__right5" class="panel__right"><div id="layers-container5" class="layers-container"></div><div id="styles-container5" class="styles-container"></div></div></div><div id="blocks5"></div></div></div><p>Inside Style Manager definition we use <code>buildProps</code> which helps us create common properties from <a href="/docs/modules/Style-manager.html#built-in-properties">available built-in objects</a> then in <code>properties</code> we can override same objects (eg. passing another <code>name</code> to change the label) identified by <code>property</code> name. As you can see from <code>custom-prop</code> example it's a matter of defining the CSS <code>property</code> and the input <code>type</code>. We suggest to check a more complete example of Style Manager properties usage from the <a href="https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1000" target="_blank" rel="noopener noreferrer">webpage preset demo<svg xmlns="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"><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></a></p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Check the <a href="/docs/api/panels.html">Style Manager API</a> to see how to update sectors and properties dynamically</p></div><h2 id="traits"><a href="#traits" aria-hidden="true" class="header-anchor">#</a> Traits</h2><p>Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. Traits are commonly used to update HTML element attributes (eg. <code>placeholder</code> for inputs or <code>alt</code> for images), but you can also define your own custom traits. Access the selected Component model and do whatever you want. For this guide, we going to show you how to render available traits, for more details on how to extend them we suggest you read the <a href="/docs/modules/Traits.html">Trait Manager Module page</a>.</p><p>Let's create a new container for traits. Tell the editor where to render it and update the sidebar switcher</p><div class="language-html extra-class"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br><br></div><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">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__right<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layers-container<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>styles-container<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>traits-container<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
|||
... |
|||
</code></pre></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 comment">// ...</span> |
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'panel-switcher'</span><span class="token punctuation">,</span> |
|||
el<span class="token punctuation">:</span> <span class="token string">'.panel__switcher'</span><span class="token punctuation">,</span> |
|||
buttons<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'show-traits'</span><span class="token punctuation">,</span> |
|||
active<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Traits'</span><span class="token punctuation">,</span> |
|||
command<span class="token punctuation">:</span> <span class="token string">'show-traits'</span><span class="token punctuation">,</span> |
|||
togglable<span class="token punctuation">:</span> <span class="token boolean">false</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><span class="token punctuation">,</span> |
|||
traitManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
appendTo<span class="token punctuation">:</span> <span class="token string">'.traits-container'</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">// Define command</span> |
|||
<span class="token comment">// ...</span> |
|||
editor<span class="token punctuation">.</span>Commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'show-traits'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token function">getTraitsEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">const</span> row <span class="token operator">=</span> editor<span class="token punctuation">.</span><span class="token function">getContainer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">'.editor-row'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">return</span> row<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.traits-container'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token function">run</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> sender<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getTraitsEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <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 function">stop</span><span class="token punctuation">(</span>editor<span class="token punctuation">,</span> sender<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getTraitsEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</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><div class="demo-container" data-v-b3715568><div><div id="panel__top6" class="panel__top"><div id="panel__basic-actions6" class="panel__basic-actions"></div><div id="panel__switcher6" class="panel__switcher"></div></div><div class="editor-row"><div class="editor-canvas"><div id="gjs6" class="gjs"><h1>Hello World Component!</h1></div></div><div id="panel__right6" class="panel__right"><div id="layers-container6" class="layers-container"></div><div id="styles-container6" class="styles-container"></div><div id="traits-container6" class="traits-container"></div></div></div><div id="blocks6"></div></div></div><p>Now if you switch to the Trait panel and select one of the inner components you should see its default traits.</p><h2 id="responsive-templates"><a href="#responsive-templates" aria-hidden="true" class="header-anchor">#</a> Responsive templates</h2><p>GrapesJS implements a module which allows you to work with responsive templates easily. Let's see how to define different devices and a button for device switching</p><div class="language-html extra-class"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br></div><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">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__top<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__basic-actions<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__devices<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>panel__switcher<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
|||
... |
|||
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.panel__devices</span> <span class="token punctuation">{</span> |
|||
<span class="token property">position</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
</code></pre></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 comment">// ...</span> |
|||
deviceManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
devices<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Desktop'</span><span class="token punctuation">,</span> |
|||
width<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// default size</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Mobile'</span><span class="token punctuation">,</span> |
|||
width<span class="token punctuation">:</span> <span class="token string">'320px'</span><span class="token punctuation">,</span> <span class="token comment">// this value will be used on canvas width</span> |
|||
widthMedia<span class="token punctuation">:</span> <span class="token string">'480px'</span><span class="token punctuation">,</span> <span class="token comment">// this value will be used in CSS @media</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">// ...</span> |
|||
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'panel-devices'</span><span class="token punctuation">,</span> |
|||
el<span class="token punctuation">:</span> <span class="token string">'.panel__devices'</span><span class="token punctuation">,</span> |
|||
buttons<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'device-desktop'</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'D'</span><span class="token punctuation">,</span> |
|||
command<span class="token punctuation">:</span> <span class="token string">'set-device-desktop'</span><span class="token punctuation">,</span> |
|||
active<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
|||
togglable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'device-mobile'</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'M'</span><span class="token punctuation">,</span> |
|||
command<span class="token punctuation">:</span> <span class="token string">'set-device-mobile'</span><span class="token punctuation">,</span> |
|||
togglable<span class="token punctuation">:</span> <span class="token boolean">false</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><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
|
|||
<span class="token comment">// Commands</span> |
|||
editor<span class="token punctuation">.</span>Commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'set-device-desktop'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
run<span class="token punctuation">:</span> editor <span class="token operator">=></span> editor<span class="token punctuation">.</span><span class="token function">setDevice</span><span class="token punctuation">(</span><span class="token string">'Desktop'</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>Commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'set-device-mobile'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
run<span class="token punctuation">:</span> editor <span class="token operator">=></span> editor<span class="token punctuation">.</span><span class="token function">setDevice</span><span class="token punctuation">(</span><span class="token string">'Mobile'</span><span class="token punctuation">)</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><div class="demo-container" data-v-b3715568><div><div id="panel__top7" class="panel__top"><div id="panel__basic-actions7" class="panel__basic-actions"></div><div id="panel__devices7" class="panel__devices"></div><div id="panel__switcher7" class="panel__switcher"></div></div><div class="editor-row"><div class="editor-canvas"><div id="gjs7" class="gjs"><h1>Hello World Component!</h1></div></div><div id="panel__right7" class="panel__right"><div id="layers-container7" class="layers-container"></div><div id="styles-container7" class="styles-container"></div><div id="traits-container7" class="traits-container"></div></div></div><div id="blocks7"></div></div></div><p>As you can see from the commands definition we use the <code>editor.setDevice</code> method to change the size of the viewport. In case you need to trigger an action on device change you can setup a listener like this:</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'change:device'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Current device: '</span><span class="token punctuation">,</span> editor<span class="token punctuation">.</span><span class="token function">getDevice</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>What about the mobile-first approach? You can achieve it by changing your configurations in this way:</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> |
|||
mediaCondition<span class="token punctuation">:</span> <span class="token string">'min-width'</span><span class="token punctuation">,</span> <span class="token comment">// default is `max-width`</span> |
|||
deviceManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
devices<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Mobile'</span><span class="token punctuation">,</span> |
|||
width<span class="token punctuation">:</span> <span class="token string">'320'</span><span class="token punctuation">,</span> |
|||
widthMedia<span class="token punctuation">:</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> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Desktop'</span><span class="token punctuation">,</span> |
|||
width<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span> |
|||
widthMedia<span class="token punctuation">:</span><span class="token string">'1024'</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">// ...</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
|
|||
<span class="token comment">// Set initial device as Mobile</span> |
|||
editor<span class="token punctuation">.</span><span class="token function">setDevice</span><span class="token punctuation">(</span><span class="token string">'Mobile'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Check out the <a href="/docs/api/panels.html">Device Manager API</a> to see all the available methods</p></div><h2 id="store-load-data"><a href="#store-load-data" aria-hidden="true" class="header-anchor">#</a> Store & load data</h2><p>Once you have finished with defining your builder interface the next step would be to setup the storing and loading process. |
|||
GrapesJS implements 2 simple type of storages inside its Storage Manager: The local (by using <code>localStorage</code>, active by default) and the remote one. Those are enough to cover most of the cases, but it's also possible to add new implementations (<a href="https://github.com/artf/grapesjs-indexeddb" target="_blank" rel="noopener noreferrer">grapesjs-indexeddb<svg xmlns="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"><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></a> is a good example). |
|||
Let's see how the default options work</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> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'gjs-'</span><span class="token punctuation">,</span> <span class="token comment">// Prefix identifier that will be used inside storing and loading</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'local'</span><span class="token punctuation">,</span> <span class="token comment">// Type of the storage</span> |
|||
autosave<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Store data automatically</span> |
|||
autoload<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Autoload stored data on init</span> |
|||
stepsBeforeSave<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// If autosave enabled, indicates how many changes are necessary before store method is triggered</span> |
|||
storeComponents<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of components in JSON format</span> |
|||
storeStyles<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of rules in JSON format</span> |
|||
storeHtml<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of components as HTML string</span> |
|||
storeCss<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Enable/Disable storing of rules as CSS string</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>It is worth noting that the default <code>id</code> parameter adds a prefix for all keys to store. If you check the <code>localStorage</code> inside the devtool panel you'll see something like <code>{ 'gjs-components': '....' ...}</code> this way it lessens the risk of collisions.</p><p>Let's look at the configuration required to setup the remote storage</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> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'remote'</span><span class="token punctuation">,</span> |
|||
stepsBeforeSave<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
|||
urlStore<span class="token punctuation">:</span> <span class="token string">'http://store/endpoint'</span><span class="token punctuation">,</span> |
|||
urlLoad<span class="token punctuation">:</span> <span class="token string">'http://load/endpoint'</span><span class="token punctuation">,</span> |
|||
params<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// Custom parameters to pass with the remote storage request, eg. CSRF token</span> |
|||
headers<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// Custom headers for the remote storage request</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>As you might noticed, we've left some default options unchanged: Increased changes necessary for autosave triggering and passed remote endpoints. |
|||
If you prefer you could also disable the autosaving and you can do so using a custom command</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// ...</span> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'remote'</span><span class="token punctuation">,</span> |
|||
autosave<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// ...</span> |
|||
commands<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'store-data'</span><span class="token punctuation">,</span> |
|||
<span class="token function">run</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
editor<span class="token punctuation">.</span><span class="token function">store</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> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token comment">// ...</span> |
|||
</code></pre></div><p>To get a better overview of the Storage Manager and how you should store/load the template, or how to define new storages you should read the <a href="/docs/modules/Storage.html">Storage Manager Module</a> page</p><h2 id="theming"><a href="#theming" aria-hidden="true" class="header-anchor">#</a> Theming</h2><p>One last step that might actually improve a lot your editor personality is how it's look visually. To achieve an easy theming we have adapted an atomic design for this purpose. To customize the main palette of colors all you have to do is to change few CSS rules. Alternatively if you include GrapesJS styles via SCSS you can make use of its <a href="https://github.com/artf/grapesjs/blob/dev/src/styles/scss/_gjs_variables.scss" target="_blank" rel="noopener noreferrer">internal variables<svg xmlns="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"><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></a> and declare your variables before the import</p><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// Put your variables before the GrapesJS style import</span> |
|||
|
|||
<span class="token comment">// Palette variables</span> |
|||
<span class="token property"><span class="token variable">$primaryColor</span></span><span class="token punctuation">:</span> #444<span class="token punctuation">;</span> |
|||
<span class="token property"><span class="token variable">$secondaryColor</span></span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> |
|||
<span class="token property"><span class="token variable">$tertiaryColor</span></span><span class="token punctuation">:</span> #804f7b<span class="token punctuation">;</span> |
|||
<span class="token property"><span class="token variable">$quaternaryColor</span></span><span class="token punctuation">:</span> #d278c9<span class="token punctuation">;</span> |
|||
|
|||
<span class="token comment">// ...</span> |
|||
|
|||
<span class="token keyword">@import</span> <span class="token string">"grapesjs/src/styles/scss/main.scss"</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>In case of a simple CSS you'll have to put your rules after the GrapesJS styles. |
|||
To complete our builder let's customize its color palette and to make it more visually "readable" we can replace all button labels with SVG icons</p><div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* We can remove the border we've set at the beginnig */</span> |
|||
<span class="token selector">#gjs</span> <span class="token punctuation">{</span> |
|||
<span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token comment">/* Theming */</span> |
|||
|
|||
<span class="token comment">/* Primary color for the background */</span> |
|||
<span class="token selector">.gjs-one-bg</span> <span class="token punctuation">{</span> |
|||
<span class="token property">background-color</span><span class="token punctuation">:</span> #78366a<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
|
|||
<span class="token comment">/* Secondary color for the text color */</span> |
|||
<span class="token selector">.gjs-two-color</span> <span class="token punctuation">{</span> |
|||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255, 255, 255, 0.7<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
|
|||
<span class="token comment">/* Tertiary color for the background */</span> |
|||
<span class="token selector">.gjs-three-bg</span> <span class="token punctuation">{</span> |
|||
<span class="token property">background-color</span><span class="token punctuation">:</span> #ec5896<span class="token punctuation">;</span> |
|||
<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
|
|||
<span class="token comment">/* Quaternary color for the text color */</span> |
|||
<span class="token selector">.gjs-four-color, |
|||
.gjs-four-color-h:hover</span> <span class="token punctuation">{</span> |
|||
<span class="token property">color</span><span class="token punctuation">:</span> #ec5896<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
</code></pre></div><p>and here is our final result</p><div id="final-result" class="demo-container" data-v-b3715568><div class="gjs__themed"><div id="panel__top8" class="panel__top"><div id="panel__basic-actions8" class="panel__basic-actions"></div><div id="panel__devices8" class="panel__devices"></div><div id="panel__switcher8" class="panel__switcher"></div></div><div class="editor-row"><div class="editor-canvas"><div id="gjs8" class="gjs"><h1>Hello World Component!</h1></div></div><div id="panel__right8" class="panel__right"><div id="layers-container8" class="layers-container"></div><div id="styles-container8" class="styles-container"></div><div id="traits-container8" class="traits-container"></div></div></div><div id="blocks8"></div></div></div></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/getting-started.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">10/26/2018, 1:39:09 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/" class="prev router-link-active"> |
|||
Introduction |
|||
</a></span><span class="next"><a href="/docs/modules/Assets.html"> |
|||
Assets |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/32.2f2eecfd.js" defer></script><script src="/docs/assets/js/10.a106a5cd.js" defer></script><script src="/docs/assets/js/3.651320c9.js" defer></script><script src="/docs/assets/js/2.434af1ad.js" defer></script><script src="/docs/assets/js/4.ccc41891.js" defer></script><script src="/docs/assets/js/6.9af8fc3b.js" defer></script><script src="/docs/assets/js/7.224c3fec.js" defer></script><script src="/docs/assets/js/9.9f34d8b5.js" defer></script><script src="/docs/assets/js/5.20d1ecdf.js" defer></script><script src="/docs/assets/js/8.e9d59c3e.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,106 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>Replace the built-in Rich Text Editor | GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/34.e495786f.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><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/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/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="active sidebar-link">Replace Rich Text Editor</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#interface" class="sidebar-link">Interface</a></li><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#toolbar-position" class="sidebar-link">Toolbar position</a></li><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#the-built-in-vs-third-party" class="sidebar-link">The built-in vs third-party</a></li><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#plugins" class="sidebar-link">Plugins</a></li></ul></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="replace-the-built-in-rich-text-editor"><a href="#replace-the-built-in-rich-text-editor" aria-hidden="true" class="header-anchor">#</a> Replace the built-in Rich Text Editor</h1><p>As you might have noticed the default Rich Text Editor (RTE) is really tiny and so doesn't seem like a complete solution as a text editor. Instead of showing how to add new commands inside the default one we'll show how to completely replace it with another one.</p><p>In the following guide we'll integrate the CKEditor and to accomplish this task we just need to provide few functions to the GrapesJS API method <code>setCustomRte</code> as an interface.</p><p></p><div class="table-of-contents"><ul><li><a href="#interface">Interface</a><ul><li><a href="#enable">Enable</a></li><li><a href="#disable">Disable</a></li><li><a href="#focus">Focus</a></li></ul></li><li><a href="#toolbar-position">Toolbar position</a></li><li><a href="#the-built-in-vs-third-party">The built-in vs third-party</a></li><li><a href="#plugins">Plugins</a></li></ul></div><p></p><h2 id="interface"><a href="#interface" aria-hidden="true" class="header-anchor">#</a> Interface</h2><h3 id="enable"><a href="#enable" aria-hidden="true" class="header-anchor">#</a> Enable</h3><p>The first step is to indicate how to enable the third-party library and so for we gonna start with the <code>enable()</code> function. This method should take care of the first initialization of our custom RTE but also for the next time is called on the same element, this is why there is the <code>rte</code> argument.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
editor<span class="token punctuation">.</span><span class="token function">setCustomRte</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
|||
<span class="token comment">/** |
|||
* Enabling the custom RTE |
|||
* @param {HTMLElement} el This is the HTML node which was selected to be edited |
|||
* @param {Object} rte It's the instance you'd return from the first call of enable(). |
|||
* At the first call it'd be undefined. This is useful when you need |
|||
* to check if the RTE is already enabled on the component |
|||
* @return {Object} The return should be the RTE initialized instance |
|||
*/</span> |
|||
enable<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> rte<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// If already exists just focus</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span>rte<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> rte<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// implemented later</span> |
|||
<span class="token keyword">return</span> rte<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
|
|||
<span class="token comment">// CKEditor initialization</span> |
|||
rte <span class="token operator">=</span> <span class="token constant">CKEDITOR</span><span class="token punctuation">.</span><span class="token function">inline</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// Your configurations...</span> |
|||
toolbar<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 comment">// IMPORTANT</span> |
|||
<span class="token comment">// Generally, inline editors are attached exactly at the same position of</span> |
|||
<span class="token comment">// the selected element but in this case it'd work until you start to scroll</span> |
|||
<span class="token comment">// the canvas. For this reason you have to move the RTE's toolbar inside the</span> |
|||
<span class="token comment">// one from GrapesJS. For this purpose we used a plugin which simplify</span> |
|||
<span class="token comment">// this process and move all next CKEditor's toolbars inside our indicated</span> |
|||
<span class="token comment">// element</span> |
|||
sharedSpaces<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
top<span class="token punctuation">:</span> editor<span class="token punctuation">.</span>RichTextEditor<span class="token punctuation">.</span><span class="token function">getToolbarEl</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> |
|||
|
|||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> rte<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// implemented later</span> |
|||
<span class="token keyword">return</span> rte<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><h3 id="disable"><a href="#disable" aria-hidden="true" class="header-anchor">#</a> Disable</h3><p>Once we know how to enable the RTE let's implement the method which disable it, so let's create the <code>disable()</code> function.</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">setCustomRte</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token comment">/** |
|||
* The signature of the function is the same of the enable |
|||
*/</span> |
|||
disable<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> rte<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
el<span class="token punctuation">.</span>contentEditable <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span>rte <span class="token operator">&&</span> rte<span class="token punctuation">.</span>focusManager<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
rte<span class="token punctuation">.</span>focusManager<span class="token punctuation">.</span><span class="token function">blur</span><span class="token punctuation">(</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><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><h3 id="focus"><a href="#focus" aria-hidden="true" class="header-anchor">#</a> Focus</h3><p>The <code>focus()</code> method is just a helper used inside <code>enable()</code> and not required by the interface</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">setCustomRte</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
|||
<span class="token comment">// ...</span> |
|||
focus<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> rte<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// Do nothing if already focused</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span>rte <span class="token operator">&&</span> rte<span class="token punctuation">.</span>focusManager<span class="token punctuation">.</span>hasFocus<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">return</span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
el<span class="token punctuation">.</span>contentEditable <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> |
|||
rte <span class="token operator">&&</span> rte<span class="token punctuation">.</span><span class="token function">focus</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><span class="token punctuation">;</span> |
|||
</code></pre></div><h2 id="toolbar-position"><a href="#toolbar-position" aria-hidden="true" class="header-anchor">#</a> Toolbar position</h2><p>Sometimes the default top-left position of the toolbar is not always what you need. For example, when you scroll the canvas and the toolbar reaches the top, you'd like to move it down. For this purpose, you can add a listener which applies your logic in this way:</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'rteToolbarPosUpdate'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>pos<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span>pos<span class="token punctuation">.</span>top <span class="token operator"><=</span> pos<span class="token punctuation">.</span>canvasTop<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
pos<span class="token punctuation">.</span>top <span class="token operator">=</span> pos<span class="token punctuation">.</span>elementTop <span class="token operator">+</span> pos<span class="token punctuation">.</span>elementHeight<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="the-built-in-vs-third-party"><a href="#the-built-in-vs-third-party" aria-hidden="true" class="header-anchor">#</a> The built-in vs third-party</h2><p>The only one thing you have to keep in mind when using a custom RTE is that all the content and its behavior are handled by the library itself, the GrapesJS's component will just store the content as it is. |
|||
For example, when you create a link using the built-in RTE then you'll be able to select it and edit its <code>href</code> via Component Settings. With a custom RTE, it will be its own task to show the proper modal for the link editing. |
|||
Obviously, each third-party library has its own APIs and can present some limitations and drawbacks, so, a minimal knowledge of the library is a plus.</p><h2 id="plugins"><a href="#plugins" aria-hidden="true" class="header-anchor">#</a> Plugins</h2><p>For the CKEditor, you can find a complete plugin here <a href="https://github.com/artf/grapesjs-plugin-ckeditor" target="_blank" rel="noopener noreferrer">grapesjs-plugin-ckeditor<svg xmlns="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"><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></a>.</p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/guides/Replace-Rich-Text-Editor.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/7/2018, 4:23:32 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/modules/Plugins.html" class="prev"> |
|||
Plugins |
|||
</a></span><span class="next"><a href="/docs/guides/Custom-CSS-parser.html"> |
|||
Use Custom CSS Parser |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/34.e495786f.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,372 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>Asset Manager | GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/35.e59a311f.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="active sidebar-link">Assets</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Assets.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Assets.html#initialization" class="sidebar-link">Initialization</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Assets.html#customization" class="sidebar-link">Customization</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Assets.html#uploading-assets" class="sidebar-link">Uploading assets</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Assets.html#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><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/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/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="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></div></li></ul></div><div class="page"><div class="content"><h1 id="asset-manager"><a href="#asset-manager" aria-hidden="true" class="header-anchor">#</a> Asset Manager</h1><p align="center"><img src="http://grapesjs.com/img/sc-grapesjs-assets-1.jpg" alt="GrapesJS - Asset Manager" align="center"></p><p>In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS. The Asset Manager is lightweight and implements just an <code>image</code> in its core, but as you'll see next it's easy to extend and create your own asset types.</p><p></p><div class="table-of-contents"><ul><li><a href="#configuration">Configuration</a></li><li><a href="#initialization">Initialization</a></li><li><a href="#customization">Customization</a><ul><li><a href="#define-new-asset-type">Define new Asset type</a></li><li><a href="#extend-asset-types">Extend Asset Types</a></li></ul></li><li><a href="#uploading-assets">Uploading assets</a><ul><li><a href="#listeners">Listeners</a></li><li><a href="#response">Response</a></li><li><a href="#setup-dropzone">Setup Dropzone</a></li></ul></li><li><a href="#events">Events</a></li></ul></div><p></p><h2 id="configuration"><a href="#configuration" aria-hidden="true" class="header-anchor">#</a> Configuration</h2><p>To change default configurations you'll have to pass <code>assetManager</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> |
|||
assetManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
assets<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 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>You can update most of them later by using <code>getConfig</code> inside of the module</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> amConfig <span class="token operator">=</span> editor<span class="token punctuation">.</span>AssetManager<span class="token punctuation">.</span><span class="token function">getConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Below is a list of currently available options</p><div class="language-js extra-class"><pre class="language-js"><code> <span class="token comment">// Default assets</span> |
|||
<span class="token comment">// eg. [</span> |
|||
<span class="token comment">// 'https://...image1.png',</span> |
|||
<span class="token comment">// 'https://...image2.png',</span> |
|||
<span class="token comment">// {type: 'image', src: 'https://...image3.png', someOtherCustomProp: 1},</span> |
|||
<span class="token comment">// ..</span> |
|||
<span class="token comment">// ]</span> |
|||
assets<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Content to add where there is no assets to show</span> |
|||
<span class="token comment">// eg. 'No <b>assets</b> here, drag to upload'</span> |
|||
noAssets<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Upload endpoint, set `false` to disable upload</span> |
|||
<span class="token comment">// upload: 'https://endpoint/upload/assets',</span> |
|||
<span class="token comment">// upload: false,</span> |
|||
upload<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// The name used in POST to pass uploaded files</span> |
|||
uploadName<span class="token punctuation">:</span> <span class="token string">'files'</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Custom headers to pass with the upload request</span> |
|||
headers<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Custom parameters to pass with the upload request, eg. csrf token</span> |
|||
params<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// The credentials setting for the upload request, eg. 'include', 'omit'</span> |
|||
credentials<span class="token punctuation">:</span> <span class="token string">'include'</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Allow uploading multiple files per request.</span> |
|||
<span class="token comment">// If disabled filename will not have '[]' appended</span> |
|||
multiUpload<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// If true, tries to add automatically uploaded assets.</span> |
|||
<span class="token comment">// To make it work the server should respond with a JSON containing assets</span> |
|||
<span class="token comment">// in a data key, eg:</span> |
|||
<span class="token comment">// {</span> |
|||
<span class="token comment">// data: [</span> |
|||
<span class="token comment">// 'https://.../image.png',</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token comment">// {src: 'https://.../image2.png'},</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token comment">// ]</span> |
|||
<span class="token comment">// }</span> |
|||
autoAdd<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Text on upload input</span> |
|||
uploadText<span class="token punctuation">:</span> <span class="token string">'Drop files here or click to upload'</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Label for the add button</span> |
|||
addBtnText<span class="token punctuation">:</span> <span class="token string">'Add image'</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Custom uploadFile function</span> |
|||
<span class="token comment">// @example</span> |
|||
<span class="token comment">// uploadFile: (e) => {</span> |
|||
<span class="token comment">// var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;</span> |
|||
<span class="token comment">// // ...send somewhere</span> |
|||
<span class="token comment">// }</span> |
|||
uploadFile<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Handle the image url submit from the built-in 'Add image' form</span> |
|||
<span class="token comment">// @example</span> |
|||
<span class="token comment">// handleAdd: (textFromInput) => {</span> |
|||
<span class="token comment">// // some check...</span> |
|||
<span class="token comment">// editor.AssetManager.add(textFromInput);</span> |
|||
<span class="token comment">// }</span> |
|||
handleAdd<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Enable an upload dropzone on the entire editor (not document) when dragging</span> |
|||
<span class="token comment">// files over it</span> |
|||
dropzone<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Open the asset manager once files are been dropped via the dropzone</span> |
|||
openAssetsOnDrop<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Any dropzone content to append inside dropzone element</span> |
|||
dropzoneContent<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// Default title for the asset manager modal</span> |
|||
modalTitle<span class="token punctuation">:</span> <span class="token string">'Select Image'</span><span class="token punctuation">,</span> |
|||
</code></pre></div><p>Sometimes the code gets ahead of the docs, therefore we'd suggest to keep an eye at the current state of configurations by checking the dedicated source file <a href="https://github.com/artf/grapesjs/blob/dev/src/asset_manager/config/config.js" target="_blank" rel="noopener noreferrer">Asset Manager Config<svg xmlns="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"><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></a></p><h2 id="initialization"><a href="#initialization" aria-hidden="true" class="header-anchor">#</a> Initialization</h2><p>The Asset Manager is ready to work by default, so pass few URLs to see them loaded</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> |
|||
assetManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
assets<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token string">'http://placehold.it/350x250/78c5d6/fff/image1.jpg'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Pass an object with your properties</span> |
|||
<span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span> |
|||
src<span class="token punctuation">:</span> <span class="token string">'http://placehold.it/350x250/459ba8/fff/image2.jpg'</span><span class="token punctuation">,</span> |
|||
height<span class="token punctuation">:</span> <span class="token number">350</span><span class="token punctuation">,</span> |
|||
width<span class="token punctuation">:</span> <span class="token number">250</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">{</span> |
|||
<span class="token comment">// As the 'image' is the base type of assets, omitting it will</span> |
|||
<span class="token comment">// be set as `image` by default</span> |
|||
src<span class="token punctuation">:</span> <span class="token string">'http://placehold.it/350x250/79c267/fff/image3.jpg'</span><span class="token punctuation">,</span> |
|||
height<span class="token punctuation">:</span> <span class="token number">350</span><span class="token punctuation">,</span> |
|||
width<span class="token punctuation">:</span> <span class="token number">250</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><span class="token punctuation">;</span> |
|||
</code></pre></div><p>If you want a complete list of available properties check out the source <a href="https://github.com/artf/grapesjs/blob/dev/src/asset_manager/model/AssetImage.js" target="_blank" rel="noopener noreferrer">AssetImage Model<svg xmlns="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"><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></a></p><p>The built-in Asset Manager modal is implemented and is showing up when requested. By default, you can make it appear by dragging Image Components in canvas, double clicking on images and all other stuff related to images (eg. CSS styling)</p><img src="/docs/assets-builtin-modal.png"><p>Making the modal appear is registered with a command, so you can make it appear with this</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// This command shows only assets with `image` type</span> |
|||
editor<span class="token punctuation">.</span><span class="token function">runCommand</span><span class="token punctuation">(</span><span class="token string">'open-assets'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Worth nothing that by doing this you can't do much with assets (if you double click on them nothing happens) and this is because you've not indicated any target. Try just to select an image in your canvas and run this in console (you should first make the editor globally available <code>window.editor = editor;</code> in your script)</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">runCommand</span><span class="token punctuation">(</span><span class="token string">'open-assets'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
target<span class="token punctuation">:</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 punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Now you should be able to change the image of the component.</p><h2 id="customization"><a href="#customization" aria-hidden="true" class="header-anchor">#</a> Customization</h2><p>If you want to customize the Asset Manager after the initialization you have to use its <a href="API-Asset-Manager">APIs</a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Get the Asset Manager module first</span> |
|||
<span class="token keyword">const</span> am <span class="token operator">=</span> editor<span class="token punctuation">.</span>AssetManager<span class="token punctuation">;</span> |
|||
</code></pre></div><p>First of all, it's worth nothing that Asset Manager keeps 2 collections of assets:</p><ul><li><strong>global</strong> - which is just the one with all available assets, you can get it with <code>am.getAll()</code></li><li><strong>visible</strong> - this is the collection which is currently rendered by the Asset Manager, you get it with <code>am.getAllVisible()</code></li></ul><p>This allows you to decide which assets to show and when. Let's say we'd like to have a category switcher, first of all you gonna add to the <strong>global</strong> collection all your assets (which you may already defined at init by <code>config.assetManager.assets = [...]</code>)</p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span> |
|||
<span class="token comment">// You can pass any custom property you want</span> |
|||
category<span class="token punctuation">:</span> <span class="token string">'c1'</span><span class="token punctuation">,</span> |
|||
src<span class="token punctuation">:</span> <span class="token string">'http://placehold.it/350x250/78c5d6/fff/image1.jpg'</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
category<span class="token punctuation">:</span> <span class="token string">'c1'</span><span class="token punctuation">,</span> |
|||
src<span class="token punctuation">:</span> <span class="token string">'http://placehold.it/350x250/459ba8/fff/image2.jpg'</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
category<span class="token punctuation">:</span> <span class="token string">'c2'</span><span class="token punctuation">,</span> |
|||
src<span class="token punctuation">:</span> <span class="token string">'http://placehold.it/350x250/79c267/fff/image3.jpg'</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Now if you call the <code>render()</code>, without an argument, you will see all the assets rendered</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// without any argument</span> |
|||
am<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
|
|||
am<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// <- 3</span> |
|||
am<span class="token punctuation">.</span><span class="token function">getAllVisible</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// <- 3</span> |
|||
</code></pre></div><p>Ok, now let's show only assets form the first category</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> assets <span class="token operator">=</span> am<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
|
|||
am<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>assets<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span> |
|||
asset <span class="token operator">=></span> asset<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'category'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'c1'</span> |
|||
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
|
|||
am<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// Still have 3 assets</span> |
|||
am<span class="token punctuation">.</span><span class="token function">getAllVisible</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// but only 2 are shown</span> |
|||
</code></pre></div><p>You can also mix arrays of assets</p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>assets1<span class="token punctuation">,</span> <span class="token operator">...</span>assets2<span class="token punctuation">,</span> <span class="token operator">...</span>assets3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>If you want to customize the asset manager container you can get its <code>HTMLElement</code></p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">getContainer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">'afterbegin'</span><span class="token punctuation">,</span> <span class="token string">'<div><button type="button">Click</button></div>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>For more APIs methods check out the <a href="API-Asset-Manager">API Reference</a></p><h3 id="define-new-asset-type"><a href="#define-new-asset-type" aria-hidden="true" class="header-anchor">#</a> Define new Asset type</h3><p>Generally speaking, images aren't the only asset you'll use, it could be a <code>video</code>, <code>svg-icon</code>, or any other kind of <code>document</code>. Each type of asset is applied in our templates/pages differently. If you need to change the image of the Component all you need is another <code>url</code> in <code>src</code> attribute. However In case of a <code>svg-icon</code>, its not the same, you might want to replace the element with a new <code><svg></code> content. Besides this you also have to deal with the presentation/preview of the asset inside the panel/modal. For example, showing a thumbnail for big images or the possibility to preview videos.</p><p>Defining a new asset it means we have to push on top of the 'Stack of Types' a new layer. This stack is iterated over by the editor at any addition of the asset and tries to associate the correct type.</p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'https://.../image.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// string, url, ends with '.png' -> it's an 'image' type</span> |
|||
|
|||
am<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'<svg ...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// string and starts with '<svg...' -> 'svg' type</span> |
|||
|
|||
am<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">{</span>type<span class="token punctuation">:</span> <span class="token string">'video'</span><span class="token punctuation">,</span> src<span class="token punctuation">:</span> <span class="token string">'...'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// an object, has 'video' type key -> 'video' type</span> |
|||
</code></pre></div><p>It's up to you tell the editor how to recognize your type and for this purpose you should to use <code>isType()</code> method. |
|||
Let's see now an example of how we'd start to defining a type like <code>svg-icon</code></p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'svg-icon'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// `value` is for example the argument passed in `am.add(VALUE);`</span> |
|||
<span class="token function">isType</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// The condition is intentionally simple</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'<svg '</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">return</span> <span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'svg-icon'</span><span class="token punctuation">,</span> |
|||
svgContent<span class="token punctuation">:</span> value |
|||
<span class="token punctuation">}</span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token comment">// Maybe you pass the `svg-icon` object already</span> |
|||
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> value <span class="token operator">==</span> <span class="token string">'object'</span> <span class="token operator">&&</span> value<span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">'svg-icon'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">return</span> value<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>With this snippet you can already add SVGs, the asset manager will assign the appropriate type.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Add some random SVG</span> |
|||
am<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z"></path> |
|||
<polygon points="4 10 5 10 5 14 4 14"></polygon> |
|||
</svg>`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>The default <code>open-assets</code> command shows only <code>image</code> assets, so to render <code>svg-icon</code> run this</p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>am<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span> |
|||
asset <span class="token operator">=></span> asset<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'svg-icon'</span> |
|||
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>You should see something like this</p><img src="/docs/assets-empty-view.png"><p>The SVG asset is not rendered correctly and this is because we haven't yet configured its view</p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'svg-icon'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
view<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// `getPreview()` and `getInfo()` are just few helpers, you can</span> |
|||
<span class="token comment">// override the entire template with `template()`</span> |
|||
<span class="token comment">// Check the base `template()` here:</span> |
|||
<span class="token comment">// https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/AssetView.js</span> |
|||
<span class="token function">getPreview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">return</span> <span class="token template-string"><span class="token string">`<div style="text-align: center"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'svgContent'</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div>`</span></span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token function">getInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// You can use model's properties if you passed them:</span> |
|||
<span class="token comment">// am.add({</span> |
|||
<span class="token comment">// type: 'svg-icon',</span> |
|||
<span class="token comment">// svgContent: '<svg ...',</span> |
|||
<span class="token comment">// name: 'Some name'</span> |
|||
<span class="token comment">// })</span> |
|||
<span class="token comment">// ... then</span> |
|||
<span class="token comment">// this.model.get('name');</span> |
|||
<span class="token keyword">return</span> <span class="token string">'<div>SVG description</div>'</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 function">isType</span><span class="token punctuation">(</span>value<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> |
|||
</code></pre></div><p>This is the result</p><img src="/docs/assets-svg-view.png"><p>Now we have to deal with how to assign our <code>svgContent</code> to the selected element</p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'svg-icon'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
view<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// In our case the target is the selected component</span> |
|||
<span class="token function">updateTarget</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">const</span> svg <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'svgContent'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
|
|||
<span class="token comment">// Just to make things bit interesting, if it's an image type</span> |
|||
<span class="token comment">// I put the svg as a data uri, content otherwise</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span>target<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">)</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">// Tip: you can also use `data:image/svg+xml;utf8,<svg ...` but you</span> |
|||
<span class="token comment">// have to escape few chars</span> |
|||
target<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token string">`data:mime/type;base64,</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">btoa</span><span class="token punctuation">(</span>svg<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> |
|||
target<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">,</span> svg<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 operator">...</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token function">isType</span><span class="token punctuation">(</span>value<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> |
|||
</code></pre></div><p>Our custom <code>svg-icon</code> asset is ready to use. You can also add a <code>model</code> to the <code>addType</code> definition to group the business logic of your asset, but usually it's optional.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Just an example of model use</span> |
|||
am<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'svg-icon'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
model<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// With `default` you define model's default properties</span> |
|||
defaults<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'svg-icon'</span><span class="token punctuation">,</span> |
|||
svgContent<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Default SVG Name'</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// You can call model's methods inside views:</span> |
|||
<span class="token comment">// const name = this.model.getName();</span> |
|||
<span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'name'</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> |
|||
view<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 function">isType</span><span class="token punctuation">(</span>value<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> |
|||
</code></pre></div><h3 id="extend-asset-types"><a href="#extend-asset-types" aria-hidden="true" class="header-anchor">#</a> Extend Asset Types</h3><p>Extending asset types is basically the same as adding them, you can choose what type to extend and how.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// svgIconType will contain the definition (model, view, isType)</span> |
|||
<span class="token keyword">const</span> svgIconType <span class="token operator">=</span> am<span class="token punctuation">.</span><span class="token function">getType</span><span class="token punctuation">(</span><span class="token string">'svg-icon'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
|
|||
<span class="token comment">// Add new type and extend another one</span> |
|||
am<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'svg-icon2'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
view<span class="token punctuation">:</span> svgIconType<span class="token punctuation">.</span>view<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
|||
<span class="token function">getInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">return</span> <span class="token string">'<div>SVG2 description</div>'</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">// The `isType` is important, but if you omit it the default one will be added</span> |
|||
<span class="token comment">// isType(value) {</span> |
|||
<span class="token comment">// if (value && value.type == id) {</span> |
|||
<span class="token comment">// return {type: value.type};</span> |
|||
<span class="token comment">// }</span> |
|||
<span class="token comment">// };</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>You can also extend the already defined types (to be sure to load assets with the old type extended create a plugin for your definitions)</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Extend the original `image` and add a confirm dialog before removing it</span> |
|||
am<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'image'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// As you adding on top of an already defined type you can avoid indicating</span> |
|||
<span class="token comment">// `am.getType('image').view.extend({...` the editor will do it by default</span> |
|||
<span class="token comment">// but you can eventually extend some other type</span> |
|||
view<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// If you want to see more methods to extend check out</span> |
|||
<span class="token comment">// https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/AssetImageView.js</span> |
|||
<span class="token function">onRemove</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
e<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">const</span> model <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">;</span> |
|||
|
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'Are you sure?'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
model<span class="token punctuation">.</span>collection<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span>model<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><span class="token punctuation">)</span> |
|||
</code></pre></div><h2 id="uploading-assets"><a href="#uploading-assets" aria-hidden="true" class="header-anchor">#</a> Uploading assets</h2><p>Asset Manager includes an easy to use, drag-and-drop uploader with a few UI helpers. The default uploader is already visible when you open the Asset Manager.</p><img src="/docs/assets-uploader.png"><p>You can click on the uploader to select your files or just drag them directly from your computer to trigger the uploader. Obviously, before it will work you have to setup your server to receive your assets and specify the upload endpoint in your configuration</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</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> |
|||
assetManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token operator">...</span> |
|||
<span class="token comment">// Upload endpoint, set `false` to disable upload, default `false`</span> |
|||
upload<span class="token punctuation">:</span> <span class="token string">'https://endpoint/upload/assets'</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">// The name used in POST to pass uploaded files, default: `'files'`</span> |
|||
uploadName<span class="token punctuation">:</span> <span class="token string">'files'</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> |
|||
</code></pre></div><h3 id="listeners"><a href="#listeners" aria-hidden="true" class="header-anchor">#</a> Listeners</h3><p>If you want to execute an action before/after the uploading process (eg. loading animation) or even on response, you can make use of these listeners</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// The upload is started</span> |
|||
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'asset:upload:start'</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 operator">...</span> |
|||
<span class="token function">startAnimation</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">// The upload is ended (completed or not)</span> |
|||
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'asset:upload:end'</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 operator">...</span> |
|||
<span class="token function">endAnimation</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">// Error handling</span> |
|||
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'asset:upload:error'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
<span class="token operator">...</span> |
|||
<span class="token function">notifyError</span><span class="token punctuation">(</span>err<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">// Do something on response</span> |
|||
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'asset:upload:response'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>response<span class="token punctuation">)</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> |
|||
</code></pre></div><h3 id="response"><a href="#response" aria-hidden="true" class="header-anchor">#</a> Response</h3><p>When the uploading is over, by default (via config parameter <code>autoAdd: 1</code>), the editor expects to receive a JSON blob of uploaded assets in a <code>data</code> key as a response and tries to add them to the main collection. The JSON might look like this:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span> |
|||
data<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token string">'https://.../image.png'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">{</span> |
|||
src<span class="token punctuation">:</span> <span class="token string">'https://.../image2.png'</span><span class="token punctuation">,</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span> |
|||
height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> |
|||
width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">]</span> |
|||
<span class="token punctuation">}</span> |
|||
</code></pre></div><h3 id="setup-dropzone"><a href="#setup-dropzone" aria-hidden="true" class="header-anchor">#</a> Setup Dropzone</h3><p>There is another helper which improves the uploading of assets: A full-width editor dropzone.</p><img src="/docs/assets-full-dropzone.gif"><p>All you have to do is to activate it and possibly set a custom content (you might also want to hide the default uploader)</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> |
|||
assetManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token operator">...</span><span class="token punctuation">,</span> |
|||
dropzone<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
|||
dropzoneContent<span class="token punctuation">:</span> <span class="token string">'<div class="dropzone-inner">Drop here your assets</div>'</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="events"><a href="#events" aria-hidden="true" class="header-anchor">#</a> Events</h2><p>Currently available events you can listen to</p><ul><li><code>asset:add</code> - New asset added</li><li><code>asset:remove</code> - Asset removed</li><li><code>asset:upload:start</code> - Before the upload is started</li><li><code>asset:upload:end</code> - After the upload is ended</li><li><code>asset:upload:error</code> - On any error in upload, passes the error as an argument</li><li><code>asset:upload:response</code> - On upload response, passes the result as an argument</li></ul></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/modules/Assets.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">10/26/2018, 1:52:41 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/getting-started.html" class="prev"> |
|||
Getting Started |
|||
</a></span><span class="next"><a href="/docs/modules/Blocks.html"> |
|||
Blocks |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/35.e59a311f.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,94 @@ |
|||
<!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="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/36.8c67e6e8.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="active sidebar-link">Blocks</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Blocks.html#custom-render" class="sidebar-link">Custom render</a></li></ul></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><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/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/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="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></div></li></ul></div><div class="page"><div class="content"><h1 id="block-manager"><a href="#block-manager" aria-hidden="true" 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></p><div class="table-of-contents"><ul><li><a href="#custom-render">Custom render <span class="badge tip top">0.14.55+</span></a></li></ul></div><p></p><p>The Block is a group of <a href="/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 <a href="/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 <a href="/docs/api/block_manager.html">Blocks API</a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">var</span> blockManager <span class="token operator">=</span> editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">;</span> |
|||
|
|||
<span class="token comment">// 'my-first-block' is the ID of the block</span> |
|||
blockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'my-first-block'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Simple block'</span><span class="token punctuation">,</span> |
|||
content<span class="token punctuation">:</span> <span class="token string">'<div class="my-block">This is a simple block</div>'</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 this snippet a new block will be added to the collection. You can also update existent blocks</p><div class="language-js extra-class"><pre class="language-js"><code>blockManager<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'my-first-block'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Updated simple block'</span><span class="token punctuation">,</span> |
|||
attributes<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
title<span class="token punctuation">:</span> <span class="token string">'My title'</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>As you see a simple HTML string is enough to create a block, the editor will do the rest. |
|||
If you want you could also pass an object representing the <a href="/docs/api/component.html">Component</a>.</p><div class="language-js extra-class"><pre class="language-js"><code>blockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'my-map-block'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Simple map block'</span><span class="token punctuation">,</span> |
|||
content<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span> <span class="token comment">// Built-in 'map' component</span> |
|||
style<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
height<span class="token punctuation">:</span> <span class="token string">'350px'</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
removable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Once inserted it can't be removed</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>From v0.3.70 it's also possible to pass the HTML string with Component's properties as attributes.</p><div class="language-js extra-class"><pre class="language-js"><code>blockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'the-row-block'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'2 Columns'</span><span class="token punctuation">,</span> |
|||
content<span class="token punctuation">:</span> <span class="token string">'<div class="row" data-gjs-droppable=".row-cell" data-gjs-custom-name="Row">'</span> <span class="token operator">+</span> |
|||
<span class="token string">'<div class="row-cell" data-gjs-draggable=".row"></div>'</span> <span class="token operator">+</span> |
|||
<span class="token string">'<div class="row-cell" data-gjs-draggable=".row"></div>'</span> <span class="token operator">+</span> |
|||
<span class="token string">'</div>'</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 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: |
|||
<a href="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<svg xmlns="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"><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></a></p><h2 id="custom-render"><a href="#custom-render" aria-hidden="true" class="header-anchor">#</a> Custom render <span class="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><div class="language-js extra-class"><pre class="language-js"><code>blockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'some-block-id'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
label<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`<div> |
|||
<img src="https://picsum.photos/70/70"/> |
|||
<div class="my-label-block">Label block</div> |
|||
</div>`</span></span><span class="token punctuation">,</span> |
|||
content<span class="token punctuation">:</span> <span class="token string">'<div>...</div>'</span><span class="token punctuation">,</span> |
|||
render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> model<span class="token punctuation">,</span> className <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token string">`<div class="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>className<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__my-wrap"> |
|||
Before label |
|||
</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>model<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'label'</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> |
|||
After label |
|||
</div>`</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><img src="/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><div class="language-js extra-class"><pre class="language-js"><code>blockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'some-block-id'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// ...</span> |
|||
render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> el <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">const</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
btn<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'Click me'</span><span class="token punctuation">;</span> |
|||
btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Do something'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> |
|||
el<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>btn<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><img src="/docs/block-custom-render2.jpg"></div><div 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><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">2/24/2019, 4:18:50 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/modules/Assets.html" class="prev"> |
|||
Assets |
|||
</a></span><span class="next"><a href="/docs/modules/Commands.html"> |
|||
Commands |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/36.8c67e6e8.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,168 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>Components & JS | GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/38.49bb9e38.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Components</a></li><li><a href="/docs/modules/Components-js.html" class="active sidebar-link">Components & JS</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Components-js.html#basic-scripts" class="sidebar-link">Basic scripts</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Components-js.html#dependencies" class="sidebar-link">Dependencies</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Components-js.html#examples" class="sidebar-link">Examples</a></li></ul></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Traits</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/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="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></div></li></ul></div><div class="page"><div class="content"><h1 id="components-js"><a href="#components-js" aria-hidden="true" class="header-anchor">#</a> Components & JS</h1><p>In this guide you'll see how to attach component related scripts and deal with external JavaScript libraries (for stuff like counters, galleries, slideshows, etc.)</p><p></p><div class="table-of-contents"><ul><li><a href="#basic-scripts">Basic scripts</a></li><li><a href="#dependencies">Dependencies</a><ul><li><a href="#component-related">Component related</a></li><li><a href="#template-related">Template related</a></li></ul></li><li><a href="#examples">Examples</a></li></ul></div><p></p><h2 id="basic-scripts"><a href="#basic-scripts" aria-hidden="true" class="header-anchor">#</a> Basic scripts</h2><p>Let's see how to create a component with scripts using Blocks.</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'test-block'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Test block'</span><span class="token punctuation">,</span> |
|||
attributes<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token keyword">class</span><span class="token punctuation">:</span> <span class="token string">'fa fa-text'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
content<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
script<span class="token punctuation">:</span> <span class="token string">"alert('Hi'); console.log('the element', this)"</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// Add some style just to make the component visible</span> |
|||
style<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
width<span class="token punctuation">:</span> <span class="token string">'100px'</span><span class="token punctuation">,</span> |
|||
height<span class="token punctuation">:</span> <span class="token string">'100px'</span><span class="token punctuation">,</span> |
|||
<span class="token string">'background-color'</span><span class="token punctuation">:</span> <span class="token string">'red'</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><p>Now if you drag the new block inside the canvas you'll see an alert and the message in console, as you might expect. |
|||
One thing worth noting is that <code>this</code> context is bound to the component element, so if you wanted to change a property you'd do <code>this.innerHTML = 'inner content'</code>.</p><p>One thing you should take in account is how the script is bound to component once rendered in the canvas or in your final template. If you check now the generated HTML coded by the editor (via Export button or <code>editor.getHtml()</code>), you might see something like this:</p><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">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>c764<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> |
|||
<span class="token keyword">var</span> items <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'#c764'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> |
|||
<span class="token comment">// START component code</span> |
|||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hi'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'the element'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span> |
|||
<span class="token comment">// END component code</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>items<span class="token punctuation">[</span>i<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> |
|||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
|||
</code></pre></div><p>As you see the editor attaches a unique ID to all components with scripts and retrieves them via <code>querySelectorAll</code>. Dragging another <code>test-block</code> will generate this:</p><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">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>c764<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>c765<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> |
|||
<span class="token keyword">var</span> items <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'#c764, #c765'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> |
|||
<span class="token comment">// START component code</span> |
|||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hi'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'the element'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span> |
|||
<span class="token comment">// END component code</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>items<span class="token punctuation">[</span>i<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> |
|||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
|||
</code></pre></div><p>Keep in mind that all component scripts are executed only inside the iframe of the canvas (isolated, just like your final template), and therefore are NOT part of the current <code>document</code>. All your external libraries (eg. jQuery) are not there, but you'll see later how to manage scripted components with dependencies.</p><p>One thing you might be concerned about is a string used for the <code>script</code>, definitely not the best way to deal with a code, for this reason GrapesJS is able also to handle functions for you, so the previous example might look like this:</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'test-block'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token operator">...</span> |
|||
content<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
script<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hi'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'the element'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</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> |
|||
</code></pre></div><p>This is much better, but be aware of a string conversion, you can't use variables outside of the function scope. Take a look at this scenario:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> myVar <span class="token operator">=</span> <span class="token string">'John'</span><span class="token punctuation">;</span> |
|||
|
|||
editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'test-block'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token operator">...</span> |
|||
script<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hi '</span> <span class="token operator">+</span> myVar<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'the element'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</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> |
|||
</code></pre></div><p>Unfortunately, this won't work. You'll get an undefined <code>myVar</code> error. The final HTML, with script functions converted to string, will look like this:</p><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">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>c764<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> |
|||
<span class="token keyword">var</span> items <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'#c764'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> |
|||
<span class="token comment">// START component code</span> |
|||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hi '</span> <span class="token operator">+</span> myVar<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// <- ERROR: undefined myVar</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'the element'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// END component code</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>items<span class="token punctuation">[</span>i<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> |
|||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
|||
</code></pre></div><p>There is a solution to make your scripts behave dynamically. You can interpolate properties of the component model.</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'test-block'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token operator">...</span> |
|||
content<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
myModelPropName<span class="token punctuation">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span> |
|||
script<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hi {[ myModelPropName ]}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'the element'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</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> |
|||
</code></pre></div><p>The final HTML will be:</p><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">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>c764<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> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> |
|||
<span class="token keyword">var</span> items <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'#c764'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> |
|||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hi John'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'the element'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>items<span class="token punctuation">[</span>i<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> |
|||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
|||
</code></pre></div><p>You can even change the tags used for the interpolation</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</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 comment">// Default values</span> |
|||
tagVarStart<span class="token punctuation">:</span> <span class="token string">'{[ '</span><span class="token punctuation">,</span> |
|||
tagVarEnd<span class="token punctuation">:</span> <span class="token string">' ]}'</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> |
|||
</code></pre></div><p>You can use this technique with <a href="https://github.com/artf/grapesjs/wiki/Traits#add-traits-to-components" target="_blank" rel="noopener noreferrer">property Traits<svg xmlns="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"><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></a> to create custom components.</p><h2 id="dependencies"><a href="#dependencies" aria-hidden="true" class="header-anchor">#</a> Dependencies</h2><p>As we mentioned above, scripts are executed independently inside the iframe of the canvas, without any dependencies, so exactly as the final HTML generated by the editor. |
|||
If you want to make use of external libraries you have two approaches: component-related and template-related.</p><h3 id="component-related"><a href="#component-related" aria-hidden="true" class="header-anchor">#</a> Component related</h3><p>If you're building a slider component based on some third-party library you probably would like to include the external file only when the component is actually dragged inside the canvas. In this case, the component-related approach is the perfect one as it's loading external libraries dynamically. |
|||
All you have to do is to require the dependency when it is needed and then call your script.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
script<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">var</span> el <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">var</span> <span class="token function-variable function">initMySLider</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
CoolSliderJS<span class="token punctuation">.</span><span class="token function">init</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 keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> CoolSliderJS <span class="token operator">==</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">var</span> script <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'script'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
script<span class="token punctuation">.</span>onload <span class="token operator">=</span> initMySLider<span class="token punctuation">;</span> |
|||
script<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">'https://.../coolslider.min.js'</span><span class="token punctuation">;</span> |
|||
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>script<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 operator">...</span> |
|||
</code></pre></div><h3 id="template-related"><a href="#template-related" aria-hidden="true" class="header-anchor">#</a> Template related</h3><p>A dependency might be used along all your components (eg. JQuery) so instead requiring it inside each script you might want to inject it directly inside the canvas:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</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> |
|||
canvas<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
scripts<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'</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 operator">...</span> |
|||
script<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// Do stuff using jquery</span> |
|||
<span class="token function">$</span><span class="token punctuation">(</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 operator">...</span> |
|||
</code></pre></div><h2 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h2><p>Examples of components using scripts inside</p><ul><li><a href="https://github.com/artf/grapesjs-navbar" target="_blank" rel="noopener noreferrer">grapesjs-navbar<svg xmlns="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"><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></a></li><li><a href="https://github.com/artf/grapesjs-component-countdown" target="_blank" rel="noopener noreferrer">grapesjs-component-countdown<svg xmlns="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"><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></a></li></ul></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/modules/Components-js.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">10/29/2018, 4:01:56 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/modules/Components.html" class="prev"> |
|||
Components |
|||
</a></span><span class="next"><a href="/docs/modules/Traits.html"> |
|||
Traits |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/38.49bb9e38.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,105 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>Plugins | GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/40.5c633dc6.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><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/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/Plugins.html" class="active sidebar-link">Plugins</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#basic-plugin" class="sidebar-link">Basic plugin</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#named-plugin" class="sidebar-link">Named plugin</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#plugins-with-options" class="sidebar-link">Plugins with options</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#named-plugins-vs-non-named-plugins" class="sidebar-link">Named Plugins vs Non-Named Plugins</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#boilerplate" class="sidebar-link">Boilerplate</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#popular-plugins" class="sidebar-link">Popular Plugins</a></li></ul></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="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></div></li></ul></div><div class="page"><div class="content"><h1 id="plugins"><a href="#plugins" aria-hidden="true" class="header-anchor">#</a> Plugins</h1><p>Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.</p><p></p><div class="table-of-contents"><ul><li><a href="#basic-plugin">Basic plugin</a></li><li><a href="#named-plugin">Named plugin</a></li><li><a href="#plugins-with-options">Plugins with options</a></li><li><a href="#named-plugins-vs-non-named-plugins">Named Plugins vs Non-Named Plugins</a></li><li><a href="#boilerplate">Boilerplate</a></li><li><a href="#popular-plugins">Popular Plugins</a></li></ul></div><p></p><h2 id="basic-plugin"><a href="#basic-plugin" aria-hidden="true" class="header-anchor">#</a> Basic plugin</h2><p>The most simple plugins are just functions that are run when the editor is being built.</p><div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">function</span> <span class="token function">myPlugin</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">{</span> |
|||
editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'my-first-block'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Simple block'</span><span class="token punctuation">,</span> |
|||
content<span class="token punctuation">:</span> <span class="token string">'<div class="my-block">This is a simple block</div>'</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 keyword">var</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> |
|||
container <span class="token punctuation">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span> |
|||
plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>myPlugin<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 means that plugins can be moved to separate folders to keep thing cleaner or imported from NPM.</p><div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">import</span> myPlugin <span class="token keyword">from</span> <span class="token string">'./plugins/myPlugin'</span> |
|||
<span class="token keyword">import</span> npmPackage <span class="token keyword">from</span> <span class="token string">'@npm/package'</span> |
|||
|
|||
<span class="token keyword">var</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> |
|||
container <span class="token punctuation">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span> |
|||
plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>myPlugin<span class="token punctuation">,</span> npmPackage<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="named-plugin"><a href="#named-plugin" aria-hidden="true" class="header-anchor">#</a> Named plugin</h2><p>If you're distributing your plugin globally, you may want to make a named plugin. To keep thing cleaner, so you'll probably get a similar structure:</p><div class="language- extra-class"><pre class="language-text"><code>/your/path/to/grapesjs.min.js |
|||
/your/path/to/grapesjs-plugin.js |
|||
</code></pre></div><p><strong>Important:</strong> The order that you load files matters. GrapesJS has to be loaded before the plugin. This sets up the <code>grapejs</code> global variable.</p><p>So, in your <code>grapesjs-plugin.js</code> file:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> grapesjs<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'my-plugin-name'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>editor<span class="token punctuation">,</span> options<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
<span class="token comment">/* |
|||
* Here you should rely on GrapesJS APIs, so check 'API Reference' for more info |
|||
* For example, you could do something like this to add some new command: |
|||
* |
|||
* editor.Commands.add(...); |
|||
*/</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>The name <code>my-plugin-name</code> is an ID of your plugin and you'll use it to tell your editor to grab it.</p><p>Here is a complete generic example:</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://code.jquery.com/jquery-2.2.0.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/grapes.min.css<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>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/grapes.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/grapesjs-plugin.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gjs<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> |
|||
|
|||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"> |
|||
<span class="token keyword">var</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> |
|||
container <span class="token punctuation">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span> |
|||
plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'my-plugin-name'</span><span class="token punctuation">]</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
|||
</code></pre></div><h2 id="plugins-with-options"><a href="#plugins-with-options" aria-hidden="true" class="header-anchor">#</a> Plugins with options</h2><p>It's also possible to pass custom parameters to plugins in to make them more flexible.</p><div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">var</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> |
|||
container <span class="token punctuation">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span> |
|||
plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'my-plugin-name'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
pluginsOpts<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token string">'my-plugin-name'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
customField<span class="token punctuation">:</span> <span class="token string">'customValue'</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>Inside you plugin you'll get those options via <code>options</code> argument</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> grapesjs<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'my-plugin-name'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>editor<span class="token punctuation">,</span> options<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">//{ customField: 'customValue' }</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span> |
|||
</code></pre></div><p>This also works with plugins that aren't named.</p><div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">import</span> myPlugin <span class="token keyword">from</span> <span class="token string">'../plugin'</span> |
|||
|
|||
<span class="token keyword">var</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> |
|||
container <span class="token punctuation">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span> |
|||
plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>myPlugin<span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
pluginsOpts<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token punctuation">[</span>myPlugin<span class="token punctuation">]</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
customField<span class="token punctuation">:</span> <span class="token string">'customValue'</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="named-plugins-vs-non-named-plugins"><a href="#named-plugins-vs-non-named-plugins" aria-hidden="true" class="header-anchor">#</a> Named Plugins vs Non-Named Plugins</h2><p>When you use a named plugin, then that name must be unique across all other plugins.</p><div class="language-js extra-class"><pre class="language-js"><code>grapesjs<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'my-plugin-name'</span><span class="token punctuation">,</span> fn<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>In this example, the plugin name is <code>my-plugin-name</code> and can't be used by other plugins. To avoid namespace restrictions use basic plugins that are purely functional.</p><h2 id="boilerplate"><a href="#boilerplate" aria-hidden="true" class="header-anchor">#</a> Boilerplate</h2><p>If you want to start with a production-ready boilerplate for a named plugin, you might want to try <a href="https://github.com/artf/grapesjs-plugin-boilerplate" target="_blank" rel="noopener noreferrer">grapesjs-plugin-boilerplate<svg xmlns="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"><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></a> which you can clone and start developing a named plugin immediately. For more informations check the repository</p><h2 id="popular-plugins"><a href="#popular-plugins" aria-hidden="true" class="header-anchor">#</a> Popular Plugins</h2><ul><li>https://github.com/artf/grapesjs-preset-webpage</li><li>https://github.com/artf/grapesjs-preset-newsletter</li></ul></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/modules/Plugins.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/2/2018, 1:42:17 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/modules/Storage.html" class="prev"> |
|||
Storage Manager |
|||
</a></span><span class="next"><a href="/docs/guides/Replace-Rich-Text-Editor.html"> |
|||
Replace Rich Text Editor |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/40.5c633dc6.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,197 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>Storage Manager | GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/41.17bf3b3b.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><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/Style-manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/modules/Storage.html" class="active sidebar-link">Storage Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#basic-configuration" class="sidebar-link">Basic configuration</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#setup-remote-storage" class="sidebar-link">Setup remote storage</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#store-and-load-templates" class="sidebar-link">Store and load templates</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#setup-the-server" class="sidebar-link">Setup the server</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#storage-api" class="sidebar-link">Storage API</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="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></div></li></ul></div><div class="page"><div class="content"><h1 id="storage-manager"><a href="#storage-manager" aria-hidden="true" class="header-anchor">#</a> Storage Manager</h1><p>The aim of this guide is to show how to setup correctly your storage configuration for common usages of the editor and explain also some additional advanced settings</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>This guide requires GrapesJS v0.14.15 or higher</p></div><p></p><div class="table-of-contents"><ul><li><a href="#basic-configuration">Basic configuration</a></li><li><a href="#setup-remote-storage">Setup remote storage</a></li><li><a href="#store-and-load-templates">Store and load templates</a></li><li><a href="#setup-the-server">Setup the server</a></li><li><a href="#storage-api">Storage API</a><ul><li><a href="#define-new-storage">Define new storage</a></li><li><a href="#extend-storage">Extend storage</a></li><li><a href="#examples">Examples</a></li></ul></li><li><a href="#events">Events</a></li></ul></div><p></p><h2 id="basic-configuration"><a href="#basic-configuration" aria-hidden="true" class="header-anchor">#</a> Basic configuration</h2><p>The storage manager is a built-in module implemented inside GrapesJS which allows the persistence of your data. By default, GrapesJS saves the data locally by using the built-in <code>LocalStorage</code> which just leverages <a href="https://developer.mozilla.org/it/docs/Web/API/Window/localStorage" target="_blank" rel="noopener noreferrer">localStorage API<svg xmlns="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"><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></a>. |
|||
You can initialize the editor with different storage configurations via <code>storageManager</code> option:</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 comment">// Default configurations</span> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
id<span class="token punctuation">:</span> <span class="token string">'gjs-'</span><span class="token punctuation">,</span> <span class="token comment">// Prefix identifier that will be used on parameters</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'local'</span><span class="token punctuation">,</span> <span class="token comment">// Type of the storage</span> |
|||
autosave<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Store data automatically</span> |
|||
autoload<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Autoload stored data on init</span> |
|||
stepsBeforeSave<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// If autosave enabled, indicates how many changes are necessary before store method is triggered</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>The <code>id</code> option is used to prevent collisions (quite common with localStorage) in case of multiple editors on the same page, therefore you will see parameters passed like <code>{ 'gjs-components': '...', 'gjs-style': '...', }</code></p><p>If you need to disable the storage manager you can pass any empty <code>type</code>:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
</code></pre></div><p>For all other available options check directly the <a href="https://github.com/artf/grapesjs/blob/dev/src/storage_manager/config/config.js" target="_blank" rel="noopener noreferrer">configuration source file<svg xmlns="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"><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></a>.</p><h2 id="setup-remote-storage"><a href="#setup-remote-storage" aria-hidden="true" class="header-anchor">#</a> Setup remote storage</h2><p>Switching up the remote storage is very simple, it's just a matter of specifying your endpoints for storing and loading, which generally might be also the same (if you rely on HTTP methods).</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> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'remote'</span><span class="token punctuation">,</span> |
|||
stepsBeforeSave<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> |
|||
urlStore<span class="token punctuation">:</span> <span class="token string">'http://endpoint/store-template/some-id-123'</span><span class="token punctuation">,</span> |
|||
urlLoad<span class="token punctuation">:</span> <span class="token string">'http://endpoint/load-template/some-id-123'</span><span class="token punctuation">,</span> |
|||
<span class="token comment">// For custom parameters/headers on requests</span> |
|||
params<span class="token punctuation">:</span> <span class="token punctuation">{</span> _some_token<span class="token punctuation">:</span> <span class="token string">'....'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
headers<span class="token punctuation">:</span> <span class="token punctuation">{</span> Authorization<span class="token punctuation">:</span> <span class="token string">'Basic ...'</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><p>As you can see we've left some default option unchanged, increased changes necessary for autosave triggering and passed remote endpoints.</p><h2 id="store-and-load-templates"><a href="#store-and-load-templates" aria-hidden="true" class="header-anchor">#</a> Store and load templates</h2><p>Even without a fully working endpoint, you can see what is sent from the editor by triggering the store and looking in the network panel of the inspector. GrapesJS sends mainly 4 types of parameters and it prefixes them with the <code>gjs-</code> key (you can disable it via <code>storageManager.id</code>). From the parameters, you will get the final result in 'gjs-html' and 'gjs-css' and this is what actually your end-users will gonna see on the final template/page. The other two, 'gjs-components' and 'gjs-style', are a JSON representation of your template and therefore those should be used for the template editing. <strong>So be careful</strong>, GrapesJS is able to start from any HTML/CSS but use this approach only for importing already existent HTML templates, once the user starts editing, rely always on JSON objects because the HTML doesn't contain information about your components. You can achieve it in a pretty straightforward way and if you load your page by server-side you don't even need to load asynchronously your data (so you can turn off the <code>autoload</code>).</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Lets say, for instance, you start with your already defined HTML template and you'd like to</span> |
|||
<span class="token comment">// import it on fly for the user</span> |
|||
<span class="token keyword">const</span> LandingPage <span class="token operator">=</span> <span class="token punctuation">{</span> |
|||
html<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`<div>...</div>`</span></span><span class="token punctuation">,</span> |
|||
css<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> |
|||
components<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> |
|||
style<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// ...</span> |
|||
<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 comment">// The `components` accepts HTML string or a JSON of components</span> |
|||
<span class="token comment">// Here, at first, we check and use components if are already defined, otherwise</span> |
|||
<span class="token comment">// the HTML string gonna be used</span> |
|||
components<span class="token punctuation">:</span> LandingPage<span class="token punctuation">.</span>components <span class="token operator">||</span> LandingPage<span class="token punctuation">.</span>html<span class="token punctuation">,</span> |
|||
<span class="token comment">// We might want to make the same check for styles</span> |
|||
style<span class="token punctuation">:</span> LandingPage<span class="token punctuation">.</span>style <span class="token operator">||</span> LandingPage<span class="token punctuation">.</span>css<span class="token punctuation">,</span> |
|||
<span class="token comment">// As we already initialize the editor with the template we can skip the `autoload`</span> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token operator">...</span> |
|||
autoload<span class="token punctuation">:</span> <span class="token boolean">false</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><p>If for any reason you need to get the data from the remote storage you can trigger the load, at any time, manually</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span>res <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Load callback'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Similarly, you have the same control over the storing. By default, the <code>autosave</code> is enabled and is triggered by how many changes are made to the template (change it via <code>stepsBeforeSave</code> option). As before, you can disable this behavior and trigger it manually when you need it</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
<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> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
<span class="token operator">...</span> |
|||
autosave<span class="token punctuation">:</span> <span class="token boolean">false</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">// Call load somewhere</span> |
|||
editor<span class="token punctuation">.</span><span class="token function">store</span><span class="token punctuation">(</span>res <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Store callback'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>If you need to check changes which yet need to be stored you can use <code>editor.getDirtyCount()</code>. At any, successful, store of the editor, it resets the count.</p><h2 id="setup-the-server"><a href="#setup-the-server" aria-hidden="true" class="header-anchor">#</a> Setup the server</h2><p>Server configuration might differ for any use case so generally, it's something up to you on how to make it work, but usually, the flow is pretty straightforward. Create two endpoints, one for storing (eg. <code>mydomain.com/store-page/123</code>) and the other one for loading (eg. <code>mydomain.com/load-page/123</code>), you can also create just one and distinguish them via HTTP methods (eg. <code>mydomain.com/page/123</code>, via GET you load the template, with POST you store it). |
|||
When you <strong>store</strong>, the editor doesn't expect any particular result but only a valid response from the server (status code 200). |
|||
When you <strong>load</strong> the template, return a JSON object with the data you have (don't forget to include the <code>id</code> prefix if it's used)</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span> |
|||
<span class="token comment">// `gjs-` is the id prefix</span> |
|||
<span class="token string">'gjs-components'</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> tagName<span class="token punctuation">:</span> <span class="token string">'div'</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 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 string">'gjs-style'</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 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> |
|||
</code></pre></div><p>Be sure to have a correct <code>Content-Type</code> response header, eg. in PHP you would do something like this:</p><div class="language-php extra-class"><pre class="language-php"><code><span class="token function">header</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Content-Type: application/json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">echo</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token punctuation">[</span> |
|||
<span class="token single-quoted-string string">'gjs-components'</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> |
|||
<span class="token single-quoted-string string">'gjs-style'</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> |
|||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><h2 id="storage-api"><a href="#storage-api" aria-hidden="true" class="header-anchor">#</a> Storage API</h2><p>The Storage module has also its own <a href="https://github.com/artf/grapesjs/wiki/API-Storage-Manager" target="_blank" rel="noopener noreferrer">set of API<svg xmlns="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"><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></a> that allows you to extend and add new functionalities.</p><h3 id="define-new-storage"><a href="#define-new-storage" aria-hidden="true" class="header-anchor">#</a> Define new storage</h3><p>One of the most useful methods of API is the possibility to add new storages. You might think, we have the <code>local</code> and <code>remote</code> storages, what else do we need, right? Well, let's take as an example the <code>local</code> one. As you already know, it relies on <a href="https://developer.mozilla.org/it/docs/Web/API/Window/localStorage" target="_blank" rel="noopener noreferrer">localStorage API<svg xmlns="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"><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></a> which is really cool and easy to use but one of his specs might be a big limit, by default it has a limited amount of MB to use per site (something around 5MB-10MB, depends on the browser implementation). As an alternative, we can make use of <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API" target="_blank" rel="noopener noreferrer">IndexedDB<svg xmlns="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"><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></a> which is also quite <a href="https://caniuse.com/#search=indexedDB" target="_blank" rel="noopener noreferrer">well supported<svg xmlns="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"><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></a> and allows more space usage (each browser implements its own rules, for a better understanding on how browser storage limits work, check <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria" target="_blank" rel="noopener noreferrer">here<svg xmlns="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"><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></a>). |
|||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB" target="_blank" rel="noopener noreferrer">IndexedDB configuration<svg xmlns="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"><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></a> might be too much verbose for this guide so we decided to create the <a href="https://github.com/artf/grapesjs-indexeddb" target="_blank" rel="noopener noreferrer">grapesjs-indexeddb<svg xmlns="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"><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></a> plugin, so you can check its source and see how it's implemented. For this guide we gonna see something more simpler but with the same flow, it'll be just a simple javascript object which stores key-value data, not persistent at all but the concept is the same.</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> |
|||
storageManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'simple-storage'</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">// Here our `simple-storage` implementation</span> |
|||
<span class="token keyword">const</span> SimpleStorage <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>StorageManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'simple-storage'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">/** |
|||
* Load the data |
|||
* @param {Array} keys Array containing values to load, eg, ['gjs-components', 'gjs-style', ...] |
|||
* @param {Function} clb Callback function to call when the load is ended |
|||
* @param {Function} clbErr Callback function to call in case of errors |
|||
*/</span> |
|||
<span class="token function">load</span><span class="token punctuation">(</span>keys<span class="token punctuation">,</span> clb<span class="token punctuation">,</span> clbErr<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> |
|||
|
|||
keys<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>key <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">const</span> value <span class="token operator">=</span> SimpleStorage<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
result<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> value<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">// Might be called inside some async method</span> |
|||
<span class="token function">clb</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">/** |
|||
* Store the data |
|||
* @param {Object} data Data object to store |
|||
* @param {Function} clb Callback function to call when the load is ended |
|||
* @param {Function} clbErr Callback function to call in case of errors |
|||
*/</span> |
|||
<span class="token function">store</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> clb<span class="token punctuation">,</span> clbErr<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
SimpleStorage<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> data<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token comment">// Might be called inside some async method</span> |
|||
<span class="token function">clb</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><h3 id="extend-storage"><a href="#extend-storage" aria-hidden="true" class="header-anchor">#</a> Extend storage</h3><p>Among other needs, you might need to use existing storages to create more complex uses. For example, let's say we would like to mix the local and remote storages inside another one. This is how it would look like:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> sm <span class="token operator">=</span> editor<span class="token punctuation">.</span>StorageManager<span class="token punctuation">;</span> |
|||
|
|||
sm<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'local-remote'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token function">store</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> clb<span class="token punctuation">,</span> clbErr<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">const</span> remote <span class="token operator">=</span> sm<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'remote'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">const</span> local <span class="token operator">=</span> sm<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'local'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token comment">// ...</span> |
|||
remote<span class="token punctuation">.</span><span class="token function">store</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> clb<span class="token punctuation">,</span> err <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// eg. some error on remote side, store it locally</span> |
|||
local<span class="token punctuation">.</span><span class="token function">store</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> clb<span class="token punctuation">,</span> clbError<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> |
|||
|
|||
<span class="token function">load</span><span class="token punctuation">(</span>keys<span class="token punctuation">,</span> clb<span class="token punctuation">,</span> clbErr<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// ...</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>If you need to completely replace the storage, just use the same id in <code>add</code> method</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>StorageManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'local'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// New logic for the local storage</span> |
|||
<span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// ...</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token function">store</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// ...</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><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><p>Here you can find some of the plugins extending the Storage Manager</p><ul><li><a href="https://github.com/artf/grapesjs-indexeddb" target="_blank" rel="noopener noreferrer">grapesjs-indexeddb<svg xmlns="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"><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></a> - Storage wrapper for IndexedDB</li><li><a href="https://github.com/artf/grapesjs-firestore" target="_blank" rel="noopener noreferrer">grapesjs-firestore<svg xmlns="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"><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></a> - Storage wrapper for <a href="https://firebase.google.com/docs/firestore" target="_blank" rel="noopener noreferrer">Cloud Firestore<svg xmlns="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"><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></a></li></ul><h2 id="events"><a href="#events" aria-hidden="true" class="header-anchor">#</a> Events</h2><p>Another way to extend storage capabilities is to make use of GrapesJS's event hooks, you can check <a href="https://github.com/artf/grapesjs/wiki/API-Editor#storages" target="_blank" rel="noopener noreferrer">here<svg xmlns="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"><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></a> the list of all available events for the Storage module. Let's see some of the cases where you might want to use them:</p><ul><li>Loading animation on storage requests</li></ul><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'storage:start'</span><span class="token punctuation">,</span> startLoading<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">'storage:end'</span><span class="token punctuation">,</span> endLoading<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><ul><li>Error handling</li></ul><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'storage:error'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`Error: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>err<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></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><ul><li>Extend parameters to store</li></ul><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'storage:start:store'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>objectToStore<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span>needToAddExtraParam<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
objectToStore<span class="token punctuation">.</span>customHtml <span class="token operator">=</span> <span class="token template-string"><span class="token string">`<div>...</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>editor<span class="token punctuation">.</span><span class="token function">getHtml</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">...</div>`</span></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><ul><li>Do stuff post load</li></ul><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'storage:end:load'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>resultObject<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span>resultObject<span class="token punctuation">.</span>hasSomeKey<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token comment">// do stuff</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/modules/Storage.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/10/2018, 2:27:13 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/modules/Style-manager.html" class="prev"> |
|||
Style Manager |
|||
</a></span><span class="next"><a href="/docs/modules/Plugins.html"> |
|||
Plugins |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/41.17bf3b3b.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,50 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>Style Manager | GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/42.b82b73fe.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/43.24b80d23.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><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/Style-manager.html" class="active sidebar-link">Style Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Style-manager.html#built-in-properties" class="sidebar-link">Built-in properties</a></li></ul></li><li><a href="/docs/modules/Storage.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="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></div></li></ul></div><div class="page"><div class="content"><h1 id="style-manager"><a href="#style-manager" aria-hidden="true" class="header-anchor">#</a> Style Manager</h1><p>Coming soon</p><p></p><div class="table-of-contents"><ul><li><a href="#built-in-properties">Built-in properties</a></li></ul></div><p></p><h2 id="built-in-properties"><a href="#built-in-properties" aria-hidden="true" class="header-anchor">#</a> Built-in properties</h2><p>Here you can find all the available built-in properties that you can use inside Style Manager via <code>buildProps</code>:</p><p><code>float</code>, <code>position</code>, <code>text-align</code>, <code>display</code>, <code>font-family</code>, <code>font-weight</code>, <code>border</code>, <code>border-style</code>, <code>border-color</code>, <code>border-width</code>, <code>box-shadow</code>, <code>background-repeat</code>, <code>background-position</code>, <code>background-attachment</code>, <code>background-size</code>, <code>transition</code>, <code>transition-duration</code>, <code>transition-property</code>, <code>transition-timing-function</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>margin</code>, <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code>, <code>padding</code>, <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>, <code>width</code>, <code>height</code>, <code>min-width</code>, <code>min-height</code>, <code>max-width</code>, <code>max-height</code>, <code>font-size</code>, <code>letter-spacing</code>, <code>line-height</code>, <code>text-shadow</code>, <code>border-radius</code>, <code>border-top-left-radius</code>, <code>border-top-right-radius</code>, <code>border-bottom-left-radius</code>, <code>border-bottom-right-radius</code>, <code>perspective</code>, <code>transform</code>, <code>transform-rotate-x</code>, <code>transform-rotate-y</code>, <code>transform-rotate-z</code>, <code>transform-scale-x</code>, <code>transform-scale-y</code>, <code>transform-scale-z</code>, <code>color</code>, <code>background-color</code>, <code>background</code>, <code>background-image</code>, <code>cursor</code>, <code>flex-direction</code>, <code>flex-wrap</code>, <code>justify-content</code>, <code>align-items</code>, <code>align-content</code>, <code>order</code>, <code>flex-basis</code>, <code>flex-grow</code>, <code>flex-shrink</code>, <code>align-self</code>, <code>overflow</code>, <code>overflow-x</code>, <code>overflow-y</code></p><p>Example usage:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
styleManager <span class="token punctuation">:</span> <span class="token punctuation">{</span> |
|||
sectors<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Dimension'</span><span class="token punctuation">,</span> |
|||
buildProps<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token string">'min-height'</span><span class="token punctuation">]</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'Extra'</span><span class="token punctuation">,</span> |
|||
buildProps<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'background-color'</span><span class="token punctuation">,</span> <span class="token string">'box-shadow'</span><span class="token punctuation">]</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">]</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/modules/Style-manager.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">1/21/2019, 2:30:30 PM</span></div></div><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/Storage.html"> |
|||
Storage Manager |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/42.b82b73fe.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,130 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-US"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|||
<title>Trait Manager | GrapesJS</title> |
|||
<meta name="description" content="GrapesJS documentation"> |
|||
<link rel="icon" href="/docs/logo-icon.png"> |
|||
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.61"> |
|||
<script src="../js/grapes.min.js?v0.14.61"></script> |
|||
|
|||
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.be6a3a1f.js" as="script"><link rel="preload" href="/docs/assets/js/43.24b80d23.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.a106a5cd.js"><link rel="prefetch" href="/docs/assets/js/11.e1d01d7f.js"><link rel="prefetch" href="/docs/assets/js/12.7b5df652.js"><link rel="prefetch" href="/docs/assets/js/13.2c86d6bb.js"><link rel="prefetch" href="/docs/assets/js/14.47aa7392.js"><link rel="prefetch" href="/docs/assets/js/15.e5ae77bc.js"><link rel="prefetch" href="/docs/assets/js/16.07b42741.js"><link rel="prefetch" href="/docs/assets/js/17.2a67de0b.js"><link rel="prefetch" href="/docs/assets/js/18.11c93f1e.js"><link rel="prefetch" href="/docs/assets/js/19.7a13abf6.js"><link rel="prefetch" href="/docs/assets/js/2.434af1ad.js"><link rel="prefetch" href="/docs/assets/js/20.d98c3b22.js"><link rel="prefetch" href="/docs/assets/js/21.3e3438bd.js"><link rel="prefetch" href="/docs/assets/js/22.917f34a1.js"><link rel="prefetch" href="/docs/assets/js/23.a1fe2201.js"><link rel="prefetch" href="/docs/assets/js/24.fefe1628.js"><link rel="prefetch" href="/docs/assets/js/25.32714364.js"><link rel="prefetch" href="/docs/assets/js/26.0ba924f8.js"><link rel="prefetch" href="/docs/assets/js/27.442eb105.js"><link rel="prefetch" href="/docs/assets/js/28.3d0efde8.js"><link rel="prefetch" href="/docs/assets/js/29.81c2faa9.js"><link rel="prefetch" href="/docs/assets/js/3.651320c9.js"><link rel="prefetch" href="/docs/assets/js/30.331e996f.js"><link rel="prefetch" href="/docs/assets/js/31.456da170.js"><link rel="prefetch" href="/docs/assets/js/32.2f2eecfd.js"><link rel="prefetch" href="/docs/assets/js/33.5a21eeb2.js"><link rel="prefetch" href="/docs/assets/js/34.e495786f.js"><link rel="prefetch" href="/docs/assets/js/35.e59a311f.js"><link rel="prefetch" href="/docs/assets/js/36.8c67e6e8.js"><link rel="prefetch" href="/docs/assets/js/37.ea48a200.js"><link rel="prefetch" href="/docs/assets/js/38.49bb9e38.js"><link rel="prefetch" href="/docs/assets/js/39.2eeb020a.js"><link rel="prefetch" href="/docs/assets/js/4.ccc41891.js"><link rel="prefetch" href="/docs/assets/js/40.5c633dc6.js"><link rel="prefetch" href="/docs/assets/js/41.17bf3b3b.js"><link rel="prefetch" href="/docs/assets/js/42.b82b73fe.js"><link rel="prefetch" href="/docs/assets/js/5.20d1ecdf.js"><link rel="prefetch" href="/docs/assets/js/6.9af8fc3b.js"><link rel="prefetch" href="/docs/assets/js/7.224c3fec.js"><link rel="prefetch" href="/docs/assets/js/8.e9d59c3e.js"><link rel="prefetch" href="/docs/assets/js/9.9f34d8b5.js"> |
|||
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.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" 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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 |
|||
<svg xmlns="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"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
|||
Twitter |
|||
<svg xmlns="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"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link"> |
|||
GitHub |
|||
<svg xmlns="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"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><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="active sidebar-link">Traits</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Traits.html#built-in-trait-types" class="sidebar-link">Built-in trait types</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Traits.html#add-traits-to-components" class="sidebar-link">Add Traits to Components</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Traits.html#define-new-trait-type" class="sidebar-link">Define new Trait type</a></li></ul></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/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="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></div></li></ul></div><div class="page"><div class="content"><h1 id="trait-manager"><a href="#trait-manager" aria-hidden="true" class="header-anchor">#</a> Trait Manager</h1><p>In GrapesJS, Traits can define different parameters and behaviors of a component. The user generally will see traits as the <em>Settings</em> of a component. A common use of traits is to customize element attributes (eg. <code>placeholder</code> for inputs) and in this case the editor comes already with some built-in, easy configurable, types.</p><p></p><div class="table-of-contents"><ul><li><a href="#built-in-trait-types">Built-in trait types</a></li><li><a href="#add-traits-to-components">Add Traits to Components</a></li><li><a href="#define-new-trait-type">Define new Trait type</a></li></ul></div><p></p><h2 id="built-in-trait-types"><a href="#built-in-trait-types" aria-hidden="true" class="header-anchor">#</a> Built-in trait types</h2><ul><li>text</li><li>number</li><li>checkbox</li><li>select</li><li>color</li></ul><h2 id="add-traits-to-components"><a href="#add-traits-to-components" aria-hidden="true" class="header-anchor">#</a> Add Traits to Components</h2><p>You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain two traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see this:</p><img src="/docs/default-traits.png"><p>In this example we are going to create a new Component. (<a href="/docs/modules/Components.html">Check here</a> for more details about the creation of new components with a new set of traits</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">var</span> domComps <span class="token operator">=</span> editor<span class="token punctuation">.</span>DomComponents<span class="token punctuation">;</span> |
|||
<span class="token keyword">var</span> dType <span class="token operator">=</span> domComps<span class="token punctuation">.</span><span class="token function">getType</span><span class="token punctuation">(</span><span class="token string">'default'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">var</span> dModel <span class="token operator">=</span> dType<span class="token punctuation">.</span>model<span class="token punctuation">;</span> |
|||
<span class="token keyword">var</span> dView <span class="token operator">=</span> dType<span class="token punctuation">.</span>view<span class="token punctuation">;</span> |
|||
|
|||
domComps<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
model<span class="token punctuation">:</span> dModel<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
|||
defaults<span class="token punctuation">:</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> dModel<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>defaults<span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
traits<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token comment">// strings are automatically converted to text types</span> |
|||
<span class="token string">'name'</span><span class="token punctuation">,</span> |
|||
<span class="token string">'placeholder'</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Type'</span><span class="token punctuation">,</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'type'</span><span class="token punctuation">,</span> |
|||
options<span class="token punctuation">:</span> <span class="token punctuation">[</span> |
|||
<span class="token punctuation">{</span>value<span class="token punctuation">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Text'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">{</span>value<span class="token punctuation">:</span> <span class="token string">'email'</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Email'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">{</span>value<span class="token punctuation">:</span> <span class="token string">'password'</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Password'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">{</span>value<span class="token punctuation">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Number'</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> |
|||
type<span class="token punctuation">:</span> <span class="token string">'checkbox'</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Required'</span><span class="token punctuation">,</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'required'</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> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
isComponent<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">if</span><span class="token punctuation">(</span>el<span class="token punctuation">.</span>tagName <span class="token operator">==</span> <span class="token string">'INPUT'</span><span class="token punctuation">)</span><span class="token punctuation">{</span> |
|||
<span class="token keyword">return</span> <span class="token punctuation">{</span>type<span class="token punctuation">:</span> <span class="token string">'input'</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><span class="token punctuation">,</span> |
|||
|
|||
view<span class="token punctuation">:</span> dView<span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><p>Now the result will be</p><img src="/docs/input-custom-traits.png"><p>Traits modify attributes of the model (which than reflected in canvas), but you can also have traits which change the property</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span> |
|||
traits<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span> |
|||
label<span class="token punctuation">:</span> <span class="token string">'Test'</span><span class="token punctuation">,</span> |
|||
name<span class="token punctuation">:</span> <span class="token string">'model-prop-name'</span><span class="token punctuation">,</span> |
|||
changeProp<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div><p>In this way you're able to listen for changes and react with your own logic</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>DomComponents<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
model<span class="token punctuation">:</span> dModel<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
|||
<span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">listenTo</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'change:model-prop-name'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>doStuff<span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token function">doStuff</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> |
|||
<span class="token operator">...</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
</code></pre></div><h2 id="define-new-trait-type"><a href="#define-new-trait-type" aria-hidden="true" class="header-anchor">#</a> Define new Trait type</h2><p>If built-in types are not enough (eg. something with more complex UI) you can define a new one. |
|||
Let's see this simple <code>textarea</code> element which updates contents of the component.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Each new type extends the default Trait</span> |
|||
editor<span class="token punctuation">.</span>TraitManager<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
|||
events<span class="token punctuation">:</span><span class="token punctuation">{</span> |
|||
<span class="token string">'keyup'</span><span class="token punctuation">:</span> <span class="token string">'onChange'</span><span class="token punctuation">,</span> <span class="token comment">// trigger parent onChange method on keyup</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">/** |
|||
* Returns the input element |
|||
* @return {HTMLElement} |
|||
*/</span> |
|||
getInputEl<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>inputEl<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">var</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
input<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|||
<span class="token keyword">this</span><span class="token punctuation">.</span>inputEl <span class="token operator">=</span> input<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span> |
|||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>inputEl<span class="token punctuation">;</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">,</span> |
|||
|
|||
<span class="token comment">/** |
|||
* Triggered when the value of the model is changed |
|||
*/</span> |
|||
onValueChange<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
|||
<span class="token keyword">this</span><span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'value'</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> |
|||
|
|||
<span class="token comment">// And then use it in your component</span> |
|||
<span class="token operator">...</span> |
|||
traits<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
|||
type<span class="token punctuation">:</span> <span class="token string">'content'</span><span class="token punctuation">,</span> |
|||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
|||
<span class="token operator">...</span> |
|||
</code></pre></div></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/modules/Traits.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="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"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">12/26/2018, 7:29:34 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> |
|||
← <a href="/docs/modules/Components-js.html" class="prev"> |
|||
Components & JS |
|||
</a></span><span class="next"><a href="/docs/modules/Style-manager.html"> |
|||
Style Manager |
|||
</a> → |
|||
</span></p></div></div></div></div> |
|||
<script src="/docs/assets/js/43.24b80d23.js" defer></script><script src="/docs/assets/js/app.be6a3a1f.js" defer></script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue