tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

deploy docs

pull/2301/head
Artur Arseniev 8 years ago
parent
c170057ecf
commit
8d1d1ff05b
92 changed files with 3604 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      docs/404.html
  2. 335
      docs/Home.html
  3. 85
      docs/api/assets.html
  4. 81
      docs/api/block_manager.html
  5. 58
      docs/api/commands.html
  6. 89
      docs/api/components.html
  7. 79
      docs/api/css_composer.html
  8. 56
      docs/api/device_manager.html
  9. 115
      docs/api/editor.html
  10. 36
      docs/api/index.html
  11. 70
      docs/api/keymaps.html
  12. 47
      docs/api/modal_dialog.html
  13. 92
      docs/api/panels.html
  14. 79
      docs/api/rich_text_editor.html
  15. 64
      docs/api/selector_manager.html
  16. 70
      docs/api/storage_manager.html
  17. 94
      docs/api/style_manager.html
  18. 55
      docs/api/undo_manager.html
  19. BIN
      docs/assets-builtin-modal.png
  20. BIN
      docs/assets-empty-view.png
  21. BIN
      docs/assets-full-dropzone.gif
  22. BIN
      docs/assets-svg-view.png
  23. BIN
      docs/assets-uploader.png
  24. 1
      docs/assets/css/0.styles.680773b3.css
  25. 1
      docs/assets/img/search.83621669.svg
  26. 1
      docs/assets/js/1.4c1eabe5.js
  27. 1
      docs/assets/js/10.4e962f3e.js
  28. 1
      docs/assets/js/11.1feb9616.js
  29. 1
      docs/assets/js/12.aff1f64d.js
  30. 1
      docs/assets/js/13.f5710b12.js
  31. 1
      docs/assets/js/14.78680387.js
  32. 1
      docs/assets/js/15.6ee7f49c.js
  33. 1
      docs/assets/js/16.89382312.js
  34. 1
      docs/assets/js/17.322b5a49.js
  35. 1
      docs/assets/js/18.b4dfc6ac.js
  36. 1
      docs/assets/js/19.91169ac8.js
  37. 1
      docs/assets/js/2.913089f8.js
  38. 1
      docs/assets/js/20.0f79fdeb.js
  39. 1
      docs/assets/js/21.5afad075.js
  40. 1
      docs/assets/js/22.fbaff709.js
  41. 1
      docs/assets/js/23.95e202fd.js
  42. 1
      docs/assets/js/24.4fed3e13.js
  43. 1
      docs/assets/js/25.51945ea0.js
  44. 1
      docs/assets/js/26.685b07a3.js
  45. 1
      docs/assets/js/27.8c514210.js
  46. 1
      docs/assets/js/28.14c2ddb7.js
  47. 1
      docs/assets/js/29.38c333a6.js
  48. 1
      docs/assets/js/3.ea5de9c2.js
  49. 1
      docs/assets/js/30.16f00928.js
  50. 1
      docs/assets/js/31.6be64816.js
  51. 1
      docs/assets/js/32.4ae7d1c2.js
  52. 1
      docs/assets/js/33.de44a98d.js
  53. 1
      docs/assets/js/34.7c6fa057.js
  54. 1
      docs/assets/js/35.a1820a66.js
  55. 1
      docs/assets/js/36.850684b6.js
  56. 1
      docs/assets/js/37.91f76ccf.js
  57. 1
      docs/assets/js/38.9e9e0a77.js
  58. 1
      docs/assets/js/4.beae289b.js
  59. 1
      docs/assets/js/5.8085c569.js
  60. 1
      docs/assets/js/6.a2b96fcb.js
  61. 1
      docs/assets/js/7.404a3812.js
  62. 1
      docs/assets/js/8.bab4a56f.js
  63. 1
      docs/assets/js/9.50c3291f.js
  64. 8
      docs/assets/js/app.cb65ab74.js
  65. BIN
      docs/blocks3.jpg
  66. BIN
      docs/btn-clicked.png
  67. BIN
      docs/canvas-panels.jpg
  68. BIN
      docs/default-gjs.jpg
  69. BIN
      docs/default-sm.jpg
  70. BIN
      docs/default-traits.png
  71. BIN
      docs/demo-view.png
  72. BIN
      docs/empty-gjs.png
  73. BIN
      docs/enabled-sm.jpg
  74. 33
      docs/faq.html
  75. 586
      docs/getting-started.html
  76. 12
      docs/grapes.min.js
  77. 103
      docs/guides/Replace-Rich-Text-Editor.html
  78. 42
      docs/index.html
  79. BIN
      docs/input-custom-traits.png
  80. BIN
      docs/logo-icon.png
  81. BIN
      docs/logo.png
  82. 365
      docs/modules/Assets.html
  83. 73
      docs/modules/Blocks.html
  84. 168
      docs/modules/Components-js.html
  85. 196
      docs/modules/Components.html
  86. 77
      docs/modules/Plugins.html
  87. 197
      docs/modules/Storage.html
  88. 50
      docs/modules/Style-manager.html
  89. 130
      docs/modules/Traits.html
  90. BIN
      docs/new-btn.png
  91. BIN
      docs/new-panel.png
  92. BIN
      docs/style-comp.jpg

19
docs/404.html
View File

@ -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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1><blockquote>How did we get here?</blockquote><a href="/docs/" class="router-link-active">Take me home.</a></div></div></div>
<script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

335
docs/Home.html
View File

@ -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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/29.38c333a6.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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">Asset Manager</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Component Manager</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Trait Manager</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">Storag 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></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">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>path/to/grapes.min.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>path/to/grapes.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>gjs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</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">'&lt;div class=&quot;txt-red&quot;&gt;Hello world!&lt;/div&gt;'</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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">'&lt;div style=&quot;width:300px; min-height:100px; margin: 0 auto&quot;&gt;&lt;/div&gt;'</span> <span class="token operator">+</span>
<span class="token string">'&lt;div style=&quot;width:400px; min-height:100px; margin: 0 auto&quot;&gt;&lt;/div&gt;'</span> <span class="token operator">+</span>
<span class="token string">'&lt;div style=&quot;width:500px; min-height:100px; margin: 0 auto&quot;&gt;&lt;/div&gt;'</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': '&lt;div&gt;....' ...}</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/29.38c333a6.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

85
docs/api/assets.html
View File

File diff suppressed because one or more lines are too long

81
docs/api/block_manager.html
View File

@ -0,0 +1,81 @@
<!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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/25.51945ea0.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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/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/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' =&gt; {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">'&lt;h1&gt;Put your title here&lt;/h1&gt;'</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: '&lt;h1&gt;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: '&lt;h1&gt;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></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>
blockManager<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>blocks<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>
block <span class="token operator">=&gt;</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><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">'&lt;div&gt;Content&lt;/div&gt;'</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>
</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">7/8/2018, 1:46:22 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/25.51945ea0.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

58
docs/api/commands.html
View File

@ -0,0 +1,58 @@
<!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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/24.4fed3e13.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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/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#has" class="sidebar-link">has</a></li></ul></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</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="#has">has</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">=&gt;</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="has"><a href="#has" aria-hidden="true" class="header-anchor">#</a> has</h2><p>Check if command exists</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></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></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">7/8/2018, 1:46:22 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/24.4fed3e13.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

89
docs/api/components.html
View File

File diff suppressed because one or more lines are too long

79
docs/api/css_composer.html
View File

File diff suppressed because one or more lines are too long

56
docs/api/device_manager.html
View File

@ -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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/21.5afad075.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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/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/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.5afad075.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

115
docs/api/editor.html
View File

File diff suppressed because one or more lines are too long

36
docs/api/index.html
View File

@ -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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/27.8c514210.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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/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/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/27.8c514210.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

70
docs/api/keymaps.html
View File

@ -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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/19.91169ac8.js" as="script"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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/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/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></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></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></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">=&gt;</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">=&gt;</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">// -&gt; {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">// -&gt; {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">// -&gt; {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></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">7/9/2018, 12:03:36 AM</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/19.91169ac8.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

47
docs/api/modal_dialog.html
View File

@ -0,0 +1,47 @@
<!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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/18.b4dfc6ac.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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/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/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#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></ul><h2 id="open"><a href="#open" aria-hidden="true" class="header-anchor">#</a> open</h2><p>Open the modal window</p><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="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"><a href="#parameters" 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-2"><a href="#parameters-2" 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">'&lt;div&gt;Some HTML content&lt;/div&gt;'</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">7/8/2018, 11:47:37 PM</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/18.b4dfc6ac.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

92
docs/api/panels.html
View File

@ -0,0 +1,92 @@
<!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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/17.322b5a49.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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/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/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="#removebutton">removeButton</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><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 | <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 object or instance of Button or button 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">removeButton</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 use the button id</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">7/14/2018, 3:19:12 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/api/components.html" class="prev">
DOM Components
</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/17.322b5a49.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

79
docs/api/rich_text_editor.html
View File

@ -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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/16.89382312.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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/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/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">'&lt;b&gt;B&lt;/b&gt;'</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">=&gt;</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">=&gt;</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">`&lt;a href=&quot;#&quot;&gt;</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">&lt;/a&gt;`</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">`&lt;select class=&quot;gjs-field&quot;&gt;
&lt;option&gt;1&lt;/option&gt;
&lt;option&gt;4&lt;/option&gt;
&lt;option&gt;7&lt;/option&gt;
&lt;/select&gt;`</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">=&gt;</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">=&gt;</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/16.89382312.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

64
docs/api/selector_manager.html
View File

@ -0,0 +1,64 @@
<!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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/15.6ee7f49c.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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/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/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 get better 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 &gt; #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">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>send-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>In this scenario we get:</p><ul><li>span -&gt; selector of type <code>tag</code></li><li>send-btn -&gt; selector of type <code>id</code></li><li>btn -&gt; 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></strong> Selector 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">var</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">var</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>
</code></pre></div><p>Returns <strong>Model</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">// -&gt; [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></strong> Selector name</li><li><code>type</code> (optional, default <code>Selector.TYPE_CLASS</code>)</li><li><code>tyoe</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">var</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>
</code></pre></div><p>Returns <strong>(Model | null)</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">7/8/2018, 11:38:08 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/15.6ee7f49c.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

70
docs/api/storage_manager.html
View File

File diff suppressed because one or more lines are too long

94
docs/api/style_manager.html
View File

File diff suppressed because one or more lines are too long

55
docs/api/undo_manager.html
View File

@ -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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/12.aff1f64d.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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/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/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">=&gt;</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/12.aff1f64d.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

BIN
docs/assets-builtin-modal.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
docs/assets-empty-view.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
docs/assets-full-dropzone.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
docs/assets-svg-view.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/assets-uploader.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

1
docs/assets/css/0.styles.680773b3.css
View File

File diff suppressed because one or more lines are too long

1
docs/assets/img/search.83621669.svg
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 216 B

1
docs/assets/js/1.4c1eabe5.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/10.4e962f3e.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/11.1feb9616.js
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{189:function(t,s,e){"use strict";e.r(s);var n=e(1),a=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"content"},[s("h1",{attrs:{id:"faq"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#faq","aria-hidden":"true"}},[this._v("#")]),this._v(" FAQ")]),s("p",[this._v("Coming soon")])])}],!1,null,null,null);s.default=a.exports}}]);

1
docs/assets/js/12.aff1f64d.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/13.f5710b12.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/14.78680387.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/15.6ee7f49c.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/16.89382312.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/17.322b5a49.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/18.b4dfc6ac.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/19.91169ac8.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/2.913089f8.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/20.0f79fdeb.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/21.5afad075.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/22.fbaff709.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/23.95e202fd.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/24.4fed3e13.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/25.51945ea0.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/26.685b07a3.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/27.8c514210.js
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{173:function(e,t,a){"use strict";a.r(t);var n=a(1),s=Object(n.a)({},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"content"},[this._m(0),t("p",[this._v("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 "),t("router-link",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"api-reference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api-reference","aria-hidden":"true"}},[this._v("#")]),this._v(" API Reference")])}],!1,null,null,null);t.default=s.exports}}]);

1
docs/assets/js/28.14c2ddb7.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/29.38c333a6.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/3.ea5de9c2.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/30.16f00928.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/31.6be64816.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/32.4ae7d1c2.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/33.de44a98d.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/34.7c6fa057.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/35.a1820a66.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/36.850684b6.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/37.91f76ccf.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/38.9e9e0a77.js
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{194:function(t,n,e){"use strict";e.r(n);e(253);var s=e(1),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"demo-container"},[this._t("default")],2)},[],!1,null,"b3715568",null);n.default=i.exports},236:function(t,n,e){},253:function(t,n,e){"use strict";var s=e(236);e.n(s).a}}]);

1
docs/assets/js/4.beae289b.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/5.8085c569.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/6.a2b96fcb.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/7.404a3812.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/8.bab4a56f.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/9.50c3291f.js
View File

File diff suppressed because one or more lines are too long

8
docs/assets/js/app.cb65ab74.js
View File

File diff suppressed because one or more lines are too long

BIN
docs/blocks3.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
docs/btn-clicked.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

BIN
docs/canvas-panels.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
docs/default-gjs.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
docs/default-sm.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
docs/default-traits.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
docs/demo-view.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
docs/empty-gjs.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
docs/enabled-sm.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

33
docs/faq.html
View File

@ -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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/11.1feb9616.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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">Asset Manager</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Component Manager</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Trait Manager</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">Storag 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></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/11.1feb9616.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

586
docs/getting-started.html
View File

@ -0,0 +1,586 @@
<!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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<meta name="keywords" content="grapesjs getting started">
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/10.4e962f3e.js" as="script"><link rel="preload" href="/docs/assets/js/38.9e9e0a77.js" as="script"><link rel="preload" href="/docs/assets/js/36.850684b6.js" as="script"><link rel="preload" href="/docs/assets/js/37.91f76ccf.js" as="script"><link rel="preload" href="/docs/assets/js/35.a1820a66.js" as="script"><link rel="preload" href="/docs/assets/js/33.de44a98d.js" as="script"><link rel="preload" href="/docs/assets/js/32.4ae7d1c2.js" as="script"><link rel="preload" href="/docs/assets/js/30.16f00928.js" as="script"><link rel="preload" href="/docs/assets/js/34.7c6fa057.js" as="script"><link rel="preload" href="/docs/assets/js/31.6be64816.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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 &amp; 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 &amp; 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">Asset Manager</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Component Manager</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Trait Manager</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">Storag 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></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 guide is a step-by-step introduction for everyone who wants to start creating its own builder with GrapesJS. This is not a complete guide of all functionalities but just a concise overview of most common modules.
Let's see how to create a completely customized page builder from scratch. The last demo of this page represents 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 start using GrapesJS you have to import it inside your project, so let's import its 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">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>//unpkg.com/grapesjs/dist/css/grapes.min.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>//unpkg.com/grapesjs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--
If you need plugins, put them below the main grapesjs script
&lt;script src=&quot;/path/to/some/plugin.min.js&quot;&gt;&lt;/script&gt;
--&gt;</span>
</code></pre></div><p>or if you're in 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 and for this purpose we gonna start from 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, by providing just few helpers but letting the user define the whole interface, this guarantees maximum flexibility.
The main part of the GrapesJS editor is the canvas, this is where you gonna create the whole structure of your templates and you definitely can't miss it. Let's try to initiate the editor with just 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">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>gjs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Hello World Component!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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: '&lt;h1&gt;Hello World Component!&lt;/h1&gt;'`,</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 (when you select components in the canvas, the toolbar is shown). For now we just see the example template taken from the container. Let's see now how can we 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 from creating another container and append inside it few basic blocks which we can later use 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">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>gjs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>blocks<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">'&lt;b&gt;Section&lt;/b&gt;'</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">`&lt;section&gt;
&lt;h1&gt;This is a simple title&lt;/h1&gt;
&lt;div&gt;This is just a Lorem text: Lorem ipsum dolor sit amet&lt;/div&gt;
&lt;/section&gt;`</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">'&lt;div data-gjs-type=&quot;text&quot;&gt;Insert your text here&lt;/div&gt;'</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 see we add our blocks via the initial configuration, which is ok, but obviously there might be the case 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 get more about blocks we suggest to read its dedicated page: <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 in GrapesJS Component, which is an object containing informations 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, so, for example, if you add a new attribute to the model, not only it will be available in the export code (will see later how to get it) but also the element you see in the canvas is updated with new attributes.
While this is a common behavior what it's cool about Components that you can create a totally decoupled view and show to the user whatever you desire (so not necessary reflecting the model). For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If want to get more about Custom Components and how to create and extend them, we recommend to check out <a href="/docs/modules/Components.html">Component Manager Module</a>.</p><p>GrapesJS comes along with few <a href="/docs/modules/Components.html#built-in-components">built-in Components</a> which enable different core features once rendered in canvas. Just to mention few of them, by double clicking on the image component you will see show up 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 customizable 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">'&lt;b&gt;Some static content&lt;/b&gt;'</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">'&lt;span&gt;HTML at some point&lt;/span&gt;'</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 the <a href="/docs/api/components.html">Components API</a> and see 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">=&gt;</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">'&lt;div&gt;New content&lt;/div&gt;'</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 &amp; 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">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__basic-actions<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>gjs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>blocks<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">'&lt;u&gt;B&lt;/u&gt;'</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">`&lt;textarea style=&quot;width:100%; height: 250px;&quot;&gt;
</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">
&lt;/textarea&gt;`</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>So, 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 and execute also 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">=&gt;</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">=&gt;</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">=&gt;</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 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 a layer manger. It's just 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">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__basic-actions<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>editor-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>editor-canvas<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>gjs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>layers-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>blocks<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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 probably 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 from 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">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__basic-actions<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__switcher<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>layers-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>styles-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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. A common use of traits is the ability 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 just gonna show you how to render available traits, for more details on how to extend them we suggest to 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">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>layers-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>styles-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>traits-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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 some of the inner component 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 also a module which allows you to work with responsive templates easily. Let's see how to define different devices and some 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">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__basic-actions<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__devices<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>panel__switcher<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">=&gt;</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">=&gt;</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 just use the <code>editor.setDevice</code> method to change the size of the viewport. In case you need to trigger some 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">=&gt;</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 the <a href="/docs/api/panels.html">Device Manager API</a> to get all available methods</p></div><h2 id="store-load-data"><a href="#store-load-data" aria-hidden="true" class="header-anchor">#</a> Store &amp; load data</h2><p>Once you finished with defining you 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 looks like</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>Worth noting the default <code>id</code> parameter which 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> in this way it prevents the risk of collisions.</p><p>Let's check also 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 option unchanged, increased changes necessary for autosave triggering and passed remote endpoints.
If you prefer you could also disable the autosaving and do it by yourself using some 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, how correctly you should store/load the template and how to define new storages you have to 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 or 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 yours 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">&quot;grapesjs/src/styles/scss/main.scss&quot;</span><span class="token punctuation">;</span>
</code></pre></div><p>In case of a simple CSS you just 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 &quot;readable&quot; we gonna 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">7/14/2018, 1:29:46 AM</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">
Asset Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/10.4e962f3e.js" defer></script><script src="/docs/assets/js/38.9e9e0a77.js" defer></script><script src="/docs/assets/js/36.850684b6.js" defer></script><script src="/docs/assets/js/37.91f76ccf.js" defer></script><script src="/docs/assets/js/35.a1820a66.js" defer></script><script src="/docs/assets/js/33.de44a98d.js" defer></script><script src="/docs/assets/js/32.4ae7d1c2.js" defer></script><script src="/docs/assets/js/30.16f00928.js" defer></script><script src="/docs/assets/js/34.7c6fa057.js" defer></script><script src="/docs/assets/js/31.6be64816.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

12
docs/grapes.min.js
View File

File diff suppressed because one or more lines are too long

103
docs/guides/Replace-Rich-Text-Editor.html
View File

@ -0,0 +1,103 @@
<!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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/9.50c3291f.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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">Asset Manager</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Component Manager</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Trait Manager</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">Storag 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></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">&amp;&amp;</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">&amp;&amp;</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">&amp;&amp;</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">=&gt;</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">&lt;=</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><!----></p></div></div></div></div>
<script src="/docs/assets/js/9.50c3291f.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

42
docs/index.html
View File

File diff suppressed because one or more lines are too long

BIN
docs/input-custom-traits.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/logo-icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
docs/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

365
docs/modules/Assets.html
View File

@ -0,0 +1,365 @@
<!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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/8.bab4a56f.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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">Asset Manager</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">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Component Manager</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Trait Manager</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">Storag 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></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, which is intentionally 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 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 the 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 &lt;b&gt;assets&lt;/b&gt; 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">// 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) =&gt; {</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) =&gt; {</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>Not always docs are in inline with its code, 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 just 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 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>Showing up of the modal 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 any 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">// &lt;- 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">// &lt;- 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">=&gt;</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>Obviously, you can mix more 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">'&lt;div&gt;&lt;button type=&quot;button&quot;&gt;Click&lt;/button&gt;&lt;/div&gt;'</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, an asset is not only an image, it could be a <code>video</code>, <code>svg-icon</code>, or any other kind of <code>document</code>. Each type of the 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, but in case of <code>svg-icon</code>, for instance, its not the same, you might want to replace the element with a new <code>&lt;svg&gt;</code> content. Besides this you also have to deal with the presentation/preview of the asset inside the panel/modal, like 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 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' -&gt; 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">'&lt;svg ...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// string and starts with '&lt;svg...' -&gt; '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 -&gt; 'video' type</span>
</code></pre></div><p>Obviously, it's up to you tell the editor how to recognize your type and for this purpose you have 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">'&lt;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">&amp;&amp;</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 correctly 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">`&lt;svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;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&quot;&gt;&lt;/path&gt;
&lt;polygon points=&quot;4 10 5 10 5 14 4 14&quot;&gt;&lt;/polygon&gt;
&lt;/svg&gt;`</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">=&gt;</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 correctly rendered 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">`&lt;div style=&quot;text-align: center&quot;&gt;</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">&lt;/div&gt;`</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: '&lt;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">'&lt;div&gt;SVG description&lt;/div&gt;'</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,&lt;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 which should group the business logic of your asset but usually it's optional so you can skip this part.</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 just 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">'&lt;div&gt;SVG2 description&lt;/div&gt;'</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 &amp;&amp; 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 and integrates 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 start select your files or just drag them directly from your computer to trigger the uploader. Obviously, before make it work you have to setup your server in order to receive your assets and specify the upload endpoint in configurations</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 some 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">=&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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 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 also another helper which improve 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">'&lt;div class=&quot;dropzone-inner&quot;&gt;Drop here your assets&lt;/div&gt;'</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">7/12/2018, 6:13:47 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">
Block Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/8.bab4a56f.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

73
docs/modules/Blocks.html
View File

@ -0,0 +1,73 @@
<!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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/7.404a3812.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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">Asset Manager</a></li><li><a href="/docs/modules/Blocks.html" class="active sidebar-link">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Component Manager</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Trait Manager</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">Storag 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></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>The Block is a group of <a href="Components">Components</a> and can be easily reused inside templates.</p><p>To better understand the difference between components and blocks, the component is more atomic so, for example, a single image, a text box or a map fits perfectly in this concept. 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 <a href="Components">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="API-Block-Manager">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">'&lt;div class=&quot;my-block&quot;&gt;This is a simple block&lt;/div&gt;'</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="Component">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 the 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">'&lt;div class=&quot;row&quot; data-gjs-droppable=&quot;.row-cell&quot; data-gjs-custom-name=&quot;Row&quot;&gt;'</span> <span class="token operator">+</span>
<span class="token string">'&lt;div class=&quot;row-cell&quot; data-gjs-draggable=&quot;.row&quot;&gt;&lt;/div&gt;'</span> <span class="token operator">+</span>
<span class="token string">'&lt;div class=&quot;row-cell&quot; data-gjs-draggable=&quot;.row&quot;&gt;&lt;/div&gt;'</span> <span class="token operator">+</span>
<span class="token string">'&lt;/div&gt;'</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:
https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js</p></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">7/10/2018, 2:27:13 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/modules/Assets.html" class="prev">
Asset Manager
</a></span><span class="next"><a href="/docs/modules/Components.html">
Component Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/7.404a3812.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

168
docs/modules/Components-js.html
View File

@ -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 &amp; 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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/6.a2b96fcb.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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">Asset Manager</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Component Manager</a></li><li><a href="/docs/modules/Components-js.html" class="active sidebar-link">Components &amp; 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">Trait Manager</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">Storag 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></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 &amp; 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">&quot;alert('Hi'); console.log('the element', this)&quot;</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 popup and the message in console, as you might expected.
One thing worth noting is that <code>this</code> context is binded to the component element, so, for example, if you want to change some property you'd do <code>this.innerHTML = 'inner content'</code>.</p><p>One thing you should take in account is how the script is binded 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">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>c764<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</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">&lt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>c764<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>c765<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</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">&lt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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), therefore are NOT part of the current <code>document</code> and all your external libraries (eg. JQuery) are not there, but you'll see further 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>Much easier now, but be aware of a string conversion, you can't use variables outside of the function scope, let's see 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 as you'll get 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">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>c764<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</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">&lt;</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">// &lt;- 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">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>There is actually 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">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>c764<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</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">&lt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>You can even change 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 highly customizable 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, where you won't find any dependency, so exactly as the final HTML generated by the editor.
If you want to make use of external libraries you have basically 2 types of 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, for example, 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, component related approaches is the perfect one as it's loading external libraries dynamically.
All you have to do is to require the dependency when 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>Some dependency might be highly 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">7/7/2018, 4:18:04 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/modules/Components.html" class="prev">
Component Manager
</a></span><span class="next"><a href="/docs/modules/Traits.html">
Trait Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/6.a2b96fcb.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

196
docs/modules/Components.html
View File

@ -0,0 +1,196 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Component 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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/5.8085c569.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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">Asset Manager</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="active sidebar-link">Component Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Components.html#built-in-components" class="sidebar-link">Built-in components</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Components.html#how-components-work" class="sidebar-link">How Components work?</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Components.html#component-recognition" class="sidebar-link">Component recognition</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Components.html#define-new-component" class="sidebar-link">Define new Component</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Components.html#update-component-type" class="sidebar-link">Update Component type</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Components.html#components-js" class="sidebar-link">Components &amp; JS</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Components.html#hints" class="sidebar-link">Hints</a></li></ul></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Trait Manager</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">Storag 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></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="component-manager"><a href="#component-manager" aria-hidden="true" class="header-anchor">#</a> Component Manager</h1><p>The Component is the base element for the template composition and, usually, elements like images, text boxes, maps, etc. fit perfectly in this concept. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image.</p><p></p><div class="table-of-contents"><ul><li><a href="#built-in-components">Built-in components</a></li><li><a href="#how-components-work">How Components work?</a></li><li><a href="#component-recognition">Component recognition</a></li><li><a href="#define-new-component">Define new Component</a></li><li><a href="#update-component-type">Update Component type</a></li><li><a href="#components-js">Components &amp; JS</a></li><li><a href="#hints">Hints</a></li></ul></div><p></p><h2 id="built-in-components"><a href="#built-in-components" aria-hidden="true" class="header-anchor">#</a> Built-in components</h2><ul><li>Default (Basic)</li><li>Text</li><li>Image</li><li>Video</li><li>Link</li><li>Map</li><li>Table</li><li>Row (for the table)</li><li>Cell (for the table)</li></ul><h2 id="how-components-work"><a href="#how-components-work" aria-hidden="true" class="header-anchor">#</a> How Components work?</h2><p>When we pass an HTML string to the editor 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">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://path/image<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>foo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>bar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>The editor will create and store, for each DOM element, its object representation and all next changes to the template will be made on top of this structure, which will then reflect on canvas. So, each object, usually called <em>Model</em> (or state/store), will be the source of truth for the template, but what exactly does it mean? For instance, in more practical way, once the template is rendered on the canvas, if you try to remove one of the elements using the browser inspector and then ask the editor to print the HTML (using <code>editor.getHtml()</code>) you'll see, from the code, that the element will still be there, this because the editor relies on Models and not on the DOM inside the canvas. This approach allows us to be extremely flexible on how to generate the final code (from the <em>Model</em>) and how to render it inside the canvas (from the <em>View</em>).</p><h1 id="manage-components"><a href="#manage-components" aria-hidden="true" class="header-anchor">#</a> Manage Components</h1><h2 id="component-recognition"><a href="#component-recognition" aria-hidden="true" class="header-anchor">#</a> Component recognition</h2><p>But now, how does the editor recognize which Component to bind to the <code>img</code> element and what to do with the <code>span</code> one?
Each Component inherits, from the base one, a particular static method</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
* @param {HTMLElement} el
* @return {Object}
*/</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 operator">...</span>
<span class="token punctuation">}</span>
</code></pre></div><p>This method gives us the possibility to recognize and bind component types to each HTMLElement (div, img, iframe, etc.). Each HTML element introduced inside the canvas will be processed by <code>isComponent</code> of all available types and if it matches, the object represented the type should be returned. So, for example, with the image component this method looks like:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Image component</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">'IMG'</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">'image'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Let's try with something that might look a little bit tricky. What about a Google's Map?!? Google's maps are generally embedded as <code>iframe</code>s, but the template can be composed by a lot of different <code>iframe</code>s, how can I tell the editor that a particular iframe is actually a Google's Map. Well, this part is up to you to understand which is the right pattern to choose, you have the <code>HTMLElement</code> so you can make all checks you want and in this particular case this pattern is used:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Map component</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">'IFRAME'</span> <span class="token operator">&amp;&amp;</span> <span class="token regex">/maps\.google\.com/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>el<span class="token punctuation">.</span>src<span class="token punctuation">)</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">'map'</span><span class="token punctuation">,</span> src<span class="token punctuation">:</span> el<span class="token punctuation">.</span>src<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>So, as you see, in addition to <code>tagName</code> check, we also used the <code>src</code> property, but, as you'll see, you can actually override it with your own logic by extending the built-in component.</p><h2 id="define-new-component"><a href="#define-new-component" aria-hidden="true" class="header-anchor">#</a> Define new Component</h2><p>Let's see now an example, with another HTML element, which is not handled by default Component types. What about <code>input</code> elements?</p><p>With the default GrapesJS configuration <code>input</code>s are treated just like any other element, you can move it around, style it, etc., but usually we'd like to handle this type of element more specifically. In this case, we have to create a new Component type.</p><p>Let's define just few specs for our new <em>Input</em> type:</p><ul><li>Can be dropped only inside <code>form</code> elements</li><li>Can't drop other elements inside it</li><li>Can change the type of the input (text, password, email, etc.)</li><li>Can make it required for the form</li></ul><p>To define a new Component type you need to choose from which built-in Component inherit its properties, in our case we just gonna choose the default one. Let's see a complete example of the new type definition</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Get DomComponents module</span>
<span class="token keyword">var</span> comps <span class="token operator">=</span> editor<span class="token punctuation">.</span>DomComponents<span class="token punctuation">;</span>
<span class="token comment">// Get the model and the view from the default Component type</span>
<span class="token keyword">var</span> defaultType <span class="token operator">=</span> comps<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> defaultModel <span class="token operator">=</span> defaultType<span class="token punctuation">.</span>model<span class="token punctuation">;</span>
<span class="token keyword">var</span> defaultView <span class="token operator">=</span> defaultType<span class="token punctuation">.</span>view<span class="token punctuation">;</span>
<span class="token keyword">var</span> inputTypes <span class="token operator">=</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 comment">// The `input` will be the Component type ID</span>
comps<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>
<span class="token comment">// Define the Model</span>
model<span class="token punctuation">:</span> defaultModel<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">// Extend default properties</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> defaultModel<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>defaults<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token comment">// Can be dropped only inside `form` elements</span>
draggable<span class="token punctuation">:</span> <span class="token string">'form, form *'</span><span class="token punctuation">,</span>
<span class="token comment">// Can't drop other elements inside it</span>
droppable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token comment">// Traits (Settings)</span>
traits<span class="token punctuation">:</span> <span class="token punctuation">[</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>
<span class="token comment">// Change the type of the input (text, password, email, etc.)</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> inputTypes<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
<span class="token comment">// Can make it required for the form</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 comment">// The second argument of .extend are static methods and we'll put inside our</span>
<span class="token comment">// isComponent() method. As you're putting a new Component type on top of the stack,</span>
<span class="token comment">// not declaring isComponent() might probably break stuff, especially if you extend</span>
<span class="token comment">// the default one.</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>
<span class="token comment">// Define the View</span>
view<span class="token punctuation">:</span> defaultType<span class="token punctuation">.</span>view<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 above is pretty much self-explanatory and as you see a lot of work is basically done on top of the Model properties.
The <em>View</em> is just extending the default one, so to cover also this part let's add some random behavior.</p><div class="language-js extra-class"><pre class="language-js"><code>comps<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> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
view<span class="token punctuation">:</span> defaultType<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 comment">// Bind events</span>
events<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// If you want to bind the event to children elements</span>
<span class="token comment">// 'click .someChildrenClass': 'methodName',</span>
click<span class="token punctuation">:</span> <span class="token string">'handleClick'</span><span class="token punctuation">,</span>
dblclick<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>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// It doesn't make too much sense this method inside the component</span>
<span class="token comment">// but it's ok as an example</span>
randomHex<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">return</span> <span class="token string">'#'</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">16777216</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
handleClick<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</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">set</span><span class="token punctuation">(</span><span class="token string">'style'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">randomHex</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">// &lt;- Affects the final HTML code</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">randomHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &lt;- Doesn't affect the final HTML code</span>
<span class="token comment">// Tip: updating the model will reflect the changes to the view, so, in this case,</span>
<span class="token comment">// if you put the model change after the DOM one this will override the backgroundColor</span>
<span class="token comment">// change made before</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// The render() should return 'this'</span>
render<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">// Extend the original render method</span>
defaultType<span class="token punctuation">.</span>view<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>render<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span>placeholder <span class="token operator">=</span> <span class="token string">'Text here'</span><span class="token punctuation">;</span> <span class="token comment">// &lt;- Doesn't affect the final HTML code</span>
<span class="token keyword">return</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 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>From the example above you can notice few interesting things: how to bind events, how to update directly the DOM and how to update the model. The difference between updating the DOM and the model is that the HTML code (the one you get with <code>editor.getHtml()</code>) is generated from the <em>Model</em> so updating directly the DOM will not affect it, it's just the change for the canvas.</p><h2 id="update-component-type"><a href="#update-component-type" aria-hidden="true" class="header-anchor">#</a> Update Component type</h2><p>Here an example of how easily you can update/override the component</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> originalMap <span class="token operator">=</span> comps<span class="token punctuation">.</span><span class="token function">getType</span><span class="token punctuation">(</span><span class="token string">'map'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
comps<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'map'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
model<span class="token punctuation">:</span> originalMap<span class="token punctuation">.</span>model<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">// Override how the component is rendered to HTML</span>
toHTML<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">return</span> <span class="token string">'&lt;div&gt;My Custom Map&lt;/div&gt;'</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 comment">// ... new logic for isComponent</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> originalMap<span class="token punctuation">.</span>view
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="components-js"><a href="#components-js" aria-hidden="true" class="header-anchor">#</a> Components &amp; JS</h2><p>If you want to know how to create Components with javascript attached (eg. counters, galleries, slideshows, etc.) check the dedicated page
<a href="Components-&-JS">Components &amp; JS</a></p><h2 id="hints"><a href="#hints" aria-hidden="true" class="header-anchor">#</a> Hints</h2><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>gjs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>cutom-element</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>cutom-element</span><span class="token punctuation">&gt;</span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</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>
fromElement<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>
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">'cutom-element-type'</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><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>In the example above the editor will not get the new type from the HTML because the content is already parsed and appended, so it'll get it only with new components (eg. from Blocks)</p><p>Solution 1: turn off <code>autorender</code></p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</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>
autorender<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
container <span class="token punctuation">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span>
fromElement<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>
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">'cutom-element-type'</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 comment">// after all new types</span>
editor<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><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>Solution 2: put all the stuff inside a plugin (<a href="https://github.com/artf/grapesjs/wiki/Creating-plugins" target="_blank" rel="noopener noreferrer">Creating plugins<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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/modules/Components.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/Blocks.html" class="prev">
Block Manager
</a></span><span class="next"><a href="/docs/modules/Components-js.html">
Components &amp; JS
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/5.8085c569.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

77
docs/modules/Plugins.html
View File

@ -0,0 +1,77 @@
<!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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/4.beae289b.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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">Asset Manager</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Component Manager</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Trait Manager</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">Storag 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#plugins-with-options" class="sidebar-link">Plugins with options</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#boilerplate" class="sidebar-link">Boilerplate</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></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="#plugins-with-options">Plugins with options</a></li><li><a href="#boilerplate">Boilerplate</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>Generally, you would make plugins in separated files 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>The order is important as before loading your plugin, GrapesJS have to be loaded first.</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">=&gt;</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">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>http://code.jquery.com/jquery-2.2.0.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>path/to/grapes.min.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>path/to/grapes.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>path/to/grapesjs-plugin.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>gjs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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 the way to make them more flexible.</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</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>
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>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></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">=&gt;</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><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, 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 plugin immediately. For more informations check the repository</p></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">7/7/2018, 4:18:04 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/modules/Storage.html" class="prev">
Storag 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/4.beae289b.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

197
docs/modules/Storage.html
View File

@ -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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/3.ea5de9c2.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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">Asset Manager</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Component Manager</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Trait Manager</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">Storag 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></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">`&lt;div&gt;...&lt;/div&gt;`</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">=&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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">`&lt;div&gt;...</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">...&lt;/div&gt;`</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">=&gt;</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/3.ea5de9c2.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

50
docs/modules/Style-manager.html
View File

@ -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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/2.913089f8.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/1.4c1eabe5.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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">Asset Manager</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Component Manager</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Trait Manager</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">Storag 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></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>heigth</code>, <code>min-width</code>, <code>min-heigth</code>, <code>max-width</code>, <code>max-heigth</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></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">7/12/2018, 2:18:43 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/modules/Traits.html" class="prev">
Trait Manager
</a></span><span class="next"><a href="/docs/modules/Storage.html">
Storag Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/2.913089f8.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

130
docs/modules/Traits.html
View File

@ -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.23">
<script src="../js/grapes.min.js?v0.14.23"></script>
<link rel="preload" href="/docs/assets/css/0.styles.680773b3.css" as="style"><link rel="preload" href="/docs/assets/js/app.cb65ab74.js" as="script"><link rel="preload" href="/docs/assets/js/1.4c1eabe5.js" as="script"><link rel="prefetch" href="/docs/assets/js/19.91169ac8.js"><link rel="prefetch" href="/docs/assets/js/2.913089f8.js"><link rel="prefetch" href="/docs/assets/js/3.ea5de9c2.js"><link rel="prefetch" href="/docs/assets/js/4.beae289b.js"><link rel="prefetch" href="/docs/assets/js/5.8085c569.js"><link rel="prefetch" href="/docs/assets/js/6.a2b96fcb.js"><link rel="prefetch" href="/docs/assets/js/7.404a3812.js"><link rel="prefetch" href="/docs/assets/js/8.bab4a56f.js"><link rel="prefetch" href="/docs/assets/js/9.50c3291f.js"><link rel="prefetch" href="/docs/assets/js/10.4e962f3e.js"><link rel="prefetch" href="/docs/assets/js/11.1feb9616.js"><link rel="prefetch" href="/docs/assets/js/12.aff1f64d.js"><link rel="prefetch" href="/docs/assets/js/13.f5710b12.js"><link rel="prefetch" href="/docs/assets/js/14.78680387.js"><link rel="prefetch" href="/docs/assets/js/15.6ee7f49c.js"><link rel="prefetch" href="/docs/assets/js/16.89382312.js"><link rel="prefetch" href="/docs/assets/js/17.322b5a49.js"><link rel="prefetch" href="/docs/assets/js/18.b4dfc6ac.js"><link rel="prefetch" href="/docs/assets/js/20.0f79fdeb.js"><link rel="prefetch" href="/docs/assets/js/21.5afad075.js"><link rel="prefetch" href="/docs/assets/js/22.fbaff709.js"><link rel="prefetch" href="/docs/assets/js/23.95e202fd.js"><link rel="prefetch" href="/docs/assets/js/24.4fed3e13.js"><link rel="prefetch" href="/docs/assets/js/25.51945ea0.js"><link rel="prefetch" href="/docs/assets/js/26.685b07a3.js"><link rel="prefetch" href="/docs/assets/js/27.8c514210.js"><link rel="prefetch" href="/docs/assets/js/28.14c2ddb7.js"><link rel="prefetch" href="/docs/assets/js/29.38c333a6.js"><link rel="prefetch" href="/docs/assets/js/30.16f00928.js"><link rel="prefetch" href="/docs/assets/js/31.6be64816.js"><link rel="prefetch" href="/docs/assets/js/32.4ae7d1c2.js"><link rel="prefetch" href="/docs/assets/js/33.de44a98d.js"><link rel="prefetch" href="/docs/assets/js/34.7c6fa057.js"><link rel="prefetch" href="/docs/assets/js/35.a1820a66.js"><link rel="prefetch" href="/docs/assets/js/36.850684b6.js"><link rel="prefetch" href="/docs/assets/js/37.91f76ccf.js"><link rel="prefetch" href="/docs/assets/js/38.9e9e0a77.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.680773b3.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 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">Asset Manager</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Component Manager</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="active sidebar-link">Trait Manager</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">Storag 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></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 could define different parameters and behaviors of a single component. The user generally will see traits as <em>Settings</em> of each 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 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:</p><img src="/docs/default-traits.png"><p>In this case we gonna create a new Component (<a href="Components">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>By default, 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 this 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">7/12/2018, 6:13:47 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/modules/Components-js.html" class="prev">
Components &amp; 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/1.4c1eabe5.js" defer></script><script src="/docs/assets/js/app.cb65ab74.js" defer></script>
</body>
</html>

BIN
docs/new-btn.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/new-panel.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/style-comp.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

Write Preview
Loading…
Cancel
Save