Browse Source

deploy docs

pull/2301/head
Artur Arseniev 8 years ago
parent
commit
e41a6f6ab7
  1. 6
      docs/404.html
  2. 6
      docs/Home.html
  3. 4
      docs/api/assets.html
  4. 4
      docs/api/block_manager.html
  5. 6
      docs/api/canvas.html
  6. 6
      docs/api/commands.html
  7. 8
      docs/api/component.html
  8. 4
      docs/api/components.html
  9. 4
      docs/api/css_composer.html
  10. 4
      docs/api/device_manager.html
  11. 28
      docs/api/editor.html
  12. 4
      docs/api/index.html
  13. 4
      docs/api/keymaps.html
  14. 4
      docs/api/modal_dialog.html
  15. 4
      docs/api/panels.html
  16. 4
      docs/api/rich_text_editor.html
  17. 4
      docs/api/selector_manager.html
  18. 4
      docs/api/storage_manager.html
  19. 4
      docs/api/style_manager.html
  20. 8
      docs/api/undo_manager.html
  21. 2
      docs/assets/js/10.9257e084.js
  22. 2
      docs/assets/js/11.663618dd.js
  23. 2
      docs/assets/js/12.9c91baa4.js
  24. 2
      docs/assets/js/13.b7167e90.js
  25. 2
      docs/assets/js/14.1d09f9af.js
  26. 2
      docs/assets/js/15.f4316c4a.js
  27. 2
      docs/assets/js/16.ae4af21b.js
  28. 2
      docs/assets/js/17.1abba793.js
  29. 1
      docs/assets/js/18.f155b4c4.js
  30. 1
      docs/assets/js/18.f2013e09.js
  31. 2
      docs/assets/js/19.d921948e.js
  32. 2
      docs/assets/js/2.ef91b2e4.js
  33. 2
      docs/assets/js/20.2a47ec70.js
  34. 2
      docs/assets/js/21.c6421742.js
  35. 1
      docs/assets/js/22.4044a85d.js
  36. 1
      docs/assets/js/22.4baf2121.js
  37. 2
      docs/assets/js/23.c5587df3.js
  38. 2
      docs/assets/js/24.c051f379.js
  39. 2
      docs/assets/js/25.2f947e45.js
  40. 2
      docs/assets/js/26.7375acba.js
  41. 2
      docs/assets/js/27.741f6722.js
  42. 2
      docs/assets/js/28.5040c972.js
  43. 2
      docs/assets/js/29.245014e9.js
  44. 2
      docs/assets/js/3.6f294650.js
  45. 2
      docs/assets/js/30.753c7cf4.js
  46. 2
      docs/assets/js/31.7e89813a.js
  47. 2
      docs/assets/js/32.fda19034.js
  48. 1
      docs/assets/js/33.3a04bb90.js
  49. 2
      docs/assets/js/34.1814891c.js
  50. 1
      docs/assets/js/34.b904af9e.js
  51. 1
      docs/assets/js/35.0110eaf1.js
  52. 2
      docs/assets/js/36.01a0fc2b.js
  53. 2
      docs/assets/js/37.8c59c319.js
  54. 2
      docs/assets/js/38.8f378510.js
  55. 2
      docs/assets/js/39.6a0c7106.js
  56. 2
      docs/assets/js/4.a4359865.js
  57. 2
      docs/assets/js/40.9ff909f0.js
  58. 2
      docs/assets/js/41.92a37b1a.js
  59. 2
      docs/assets/js/42.8a9f7180.js
  60. 2
      docs/assets/js/5.95c28380.js
  61. 2
      docs/assets/js/6.cb35c750.js
  62. 2
      docs/assets/js/7.53f8b5b8.js
  63. 2
      docs/assets/js/8.d4eeeb94.js
  64. 2
      docs/assets/js/9.3ae8fade.js
  65. 6
      docs/assets/js/app.1436e1a7.js
  66. BIN
      docs/cssom-devtools.png
  67. BIN
      docs/cssom-result.jpg
  68. 6
      docs/faq.html
  69. 6
      docs/getting-started.html
  70. 214
      docs/guides/Custom-CSS-parser.html
  71. 15
      docs/guides/Replace-Rich-Text-Editor.html
  72. 6
      docs/index.html
  73. 19
      docs/modules/Assets.html
  74. 10
      docs/modules/Blocks.html
  75. 10
      docs/modules/Components-js.html
  76. 10
      docs/modules/Components.html
  77. 10
      docs/modules/Plugins.html
  78. 10
      docs/modules/Storage.html
  79. 10
      docs/modules/Style-manager.html
  80. 10
      docs/modules/Traits.html

6
docs/404.html

@ -9,11 +9,11 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1><blockquote>That's a Four-Oh-Four.</blockquote><a href="/docs/" class="router-link-active">Take me home.</a></div></div></div>
<script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<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.1436e1a7.js" defer></script>
</body>
</html>

6
docs/Home.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/11.69c18b86.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/11.663618dd.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li></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>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="getting-started"><a href="#getting-started" aria-hidden="true" class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&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>
@ -330,6 +330,6 @@ The default one is the localStorage which is pretty simple and all the data are
<span class="token punctuation">}</span>
<span class="token operator">...</span>
</code></pre></div><blockquote><p>Check <a href="API-Storage-Manager">Storage Manager API Reference</a></p></blockquote></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/Home.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/13/2018, 12:12:35 AM</span></div></div><!----></div></div></div>
<script src="/docs/assets/js/11.69c18b86.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/11.663618dd.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/assets.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/14.8a2ce59f.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/14.1d09f9af.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -80,6 +80,6 @@ passed entity</li></ul><h3 id="examples-7"><a href="#examples-7" aria-hidden="tr
Block Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/14.8a2ce59f.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/14.1d09f9af.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/block_manager.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/15.483a1808.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/15.f4316c4a.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -76,6 +76,6 @@ blockManager<span class="token punctuation">.</span><span class="token function"
Commands
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/15.483a1808.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/15.f4316c4a.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

6
docs/api/canvas.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/16.b70b4495.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/16.ae4af21b.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -45,13 +45,13 @@ passed to it. For instance, you can scroll smoothly by using
canvas<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span>selected<span class="token punctuation">,</span> <span class="token punctuation">{</span> behavior<span class="token punctuation">:</span> <span class="token string">'smooth'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Force the scroll, even if the element is alredy visible</span>
canvas<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span>selected<span class="token punctuation">,</span> <span class="token punctuation">{</span> force<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>
</code></pre></div></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/canvas.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/10/2018, 12:36:09 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/canvas.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/26/2018, 2:24:48 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/api/editor.html" class="prev">
Editor
</a></span><span class="next"><a href="/docs/api/assets.html">
Asset Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/16.b70b4495.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/16.ae4af21b.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

6
docs/api/commands.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/17.a1692f8c.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/17.1abba793.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -59,13 +59,13 @@ commands<span class="token punctuation">.</span><span class="token function">isA
<span class="token comment">// -&gt; false</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2 id="getactive"><a href="#getactive" aria-hidden="true" class="header-anchor">#</a> getActive</h2><p>Get all active commands</p><h3 id="examples-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>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>commands<span class="token punctuation">.</span><span class="token function">getActive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; { someCommand: itsLastReturn, anotherOne: ... };</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/commands.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/10/2018, 12:36:09 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/commands.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/26/2018, 2:24:48 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/api/block_manager.html" class="prev">
Block Manager
</a></span><span class="next"><a href="/docs/api/components.html">
DOM Components
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/17.a1692f8c.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/17.1abba793.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

8
docs/api/component.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/18.f2013e09.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/18.f155b4c4.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="active sidebar-link"> - Component</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/component.html#component" class="sidebar-link">Component</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#is" class="sidebar-link">is</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#find" class="sidebar-link">find</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#closest" class="sidebar-link">closest</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#replacewith" class="sidebar-link">replaceWith</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#setattributes" class="sidebar-link">setAttributes</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#addattributes" class="sidebar-link">addAttributes</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#getstyle" class="sidebar-link">getStyle</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#setstyle" class="sidebar-link">setStyle</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#getattributes" class="sidebar-link">getAttributes</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#addclass" class="sidebar-link">addClass</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#setclass" class="sidebar-link">setClass</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#removeclass" class="sidebar-link">removeClass</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#append" class="sidebar-link">append</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#components" class="sidebar-link">components</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#parent" class="sidebar-link">parent</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#getname" class="sidebar-link">getName</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#geticon" class="sidebar-link">getIcon</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#tohtml" class="sidebar-link">toHTML</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#getid" class="sidebar-link">getId</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#setid" class="sidebar-link">setId</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#getel" class="sidebar-link">getEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#onall" class="sidebar-link">onAll</a></li></ul></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="component"><a href="#component" aria-hidden="true" class="header-anchor">#</a> Component</h2><p>The Component object represents a single node of our template structure, so when you update its properties the changes are
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="active sidebar-link"> - Component</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/component.html#component" class="sidebar-link">Component</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#is" class="sidebar-link">is</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#find" class="sidebar-link">find</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#closest" class="sidebar-link">closest</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#replacewith" class="sidebar-link">replaceWith</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#setattributes" class="sidebar-link">setAttributes</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#addattributes" class="sidebar-link">addAttributes</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#getstyle" class="sidebar-link">getStyle</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#setstyle" class="sidebar-link">setStyle</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#getattributes" class="sidebar-link">getAttributes</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#addclass" class="sidebar-link">addClass</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#setclass" class="sidebar-link">setClass</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#removeclass" class="sidebar-link">removeClass</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#append" class="sidebar-link">append</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#components" class="sidebar-link">components</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#parent" class="sidebar-link">parent</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#getname" class="sidebar-link">getName</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#geticon" class="sidebar-link">getIcon</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#tohtml" class="sidebar-link">toHTML</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#getid" class="sidebar-link">getId</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#setid" class="sidebar-link">setId</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#getel" class="sidebar-link">getEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#onall" class="sidebar-link">onAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/component.html#remove" class="sidebar-link">remove</a></li></ul></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="component"><a href="#component" aria-hidden="true" class="header-anchor">#</a> Component</h2><p>The Component object represents a single node of our template structure, so when you update its properties the changes are
immediatly reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all
the tree of nodes).
An example on how to update properties:</p><div class="language-js extra-class"><pre class="language-js"><code>component<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
@ -114,13 +114,13 @@ component<span class="token punctuation">.</span><span class="token function">to
component is already rendered</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="onall"><a href="#onall" aria-hidden="true" class="header-anchor">#</a> onAll</h2><p>Execute callback function on itself and all inner components</p><h3 id="parameters-15"><a href="#parameters-15" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Callback function, the model is passed as an argument</li></ul><h3 id="examples-15"><a href="#examples-15" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>component<span class="token punctuation">.</span><span class="token function">onAll</span><span class="token punctuation">(</span>component <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment">// do something with component</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/component.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/13/2018, 2:12:15 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
</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 the component</p><p>Returns <strong>this</strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/component.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/13/2018, 2:12:15 PM</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/panels.html">
Panels
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/18.f2013e09.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/18.f155b4c4.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/components.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/19.73ad3cbf.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/19.d921948e.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -84,6 +84,6 @@ updated immediately</p><p>Returns <strong><a href="https://developer.mozilla.org
- Component
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/19.73ad3cbf.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/19.d921948e.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/css_composer.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/20.75ba97b9.js" as="script"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/20.2a47ec70.js" as="script"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -74,6 +74,6 @@ rule<span class="token punctuation">.</span><span class="token keyword">set</spa
Modal
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/20.75ba97b9.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/20.2a47ec70.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/device_manager.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/21.f8fdd45a.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/21.c6421742.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -51,6 +51,6 @@ console<span class="token punctuation">.</span><span class="token function">log<
Selector Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/21.f8fdd45a.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/21.c6421742.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

28
docs/api/editor.html

File diff suppressed because one or more lines are too long

4
docs/api/index.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/13.3373dd40.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/13.b7167e90.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -31,6 +31,6 @@
Editor
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/13.3373dd40.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/13.b7167e90.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/keymaps.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/23.2c2b779d.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/23.c5587df3.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -65,6 +65,6 @@ or just a command id as a string</p><h2 id="get"><a href="#get" aria-hidden="tru
Undo Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/23.2c2b779d.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/23.c5587df3.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/modal_dialog.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/24.e9c83a5a.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/24.c051f379.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -43,6 +43,6 @@
Rich Text Editor
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/24.e9c83a5a.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/24.c051f379.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/panels.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/25.93c8f5c4.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/25.2f947e45.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -87,6 +87,6 @@ command<span class="token punctuation">:</span> <span class="token keyword">func
Style Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/25.93c8f5c4.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/25.2f947e45.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/rich_text_editor.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/26.70b77d4d.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/26.7375acba.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -74,6 +74,6 @@ rte<span class="token punctuation">.</span><span class="token function">add</spa
Keymaps
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/26.70b77d4d.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/26.7375acba.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/selector_manager.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/27.93b9607a.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/27.741f6722.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -59,6 +59,6 @@ sm<span class="token punctuation">.</span><span class="token function">addClass<
CSS Composer
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/27.93b9607a.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/27.741f6722.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/storage_manager.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/28.ac3dfe4c.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/28.5040c972.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -65,6 +65,6 @@ storageManager<span class="token punctuation">.</span><span class="token functio
Device Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/28.ac3dfe4c.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/28.5040c972.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

4
docs/api/style_manager.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/29.995a1085.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/29.245014e9.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -89,6 +89,6 @@ someContainer<span class="token punctuation">.</span><span class="token function
Storage Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/29.995a1085.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/29.245014e9.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

8
docs/api/undo_manager.html

@ -6,10 +6,10 @@
<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.29">
<script src="../js/grapes.min.js?v0.14.29"></script>
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/30.d85f40d0.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/30.753c7cf4.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -50,6 +50,6 @@ stack<span class="token punctuation">.</span><span class="token function">each</
← <a href="/docs/api/keymaps.html" class="prev">
Keymaps
</a></span><!----></p></div></div></div></div>
<script src="/docs/assets/js/30.d85f40d0.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/30.753c7cf4.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

2
docs/assets/js/10.d8cb5231.js → docs/assets/js/10.9257e084.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/11.69c18b86.js → docs/assets/js/11.663618dd.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/12.f79c3787.js → docs/assets/js/12.9c91baa4.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/13.3373dd40.js → docs/assets/js/13.b7167e90.js

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{256: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);s.options.__file="README.md";t.default=s.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{247: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);s.options.__file="README.md";t.default=s.exports}}]);

2
docs/assets/js/14.8a2ce59f.js → docs/assets/js/14.1d09f9af.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/15.483a1808.js → docs/assets/js/15.f4316c4a.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/16.b70b4495.js → docs/assets/js/16.ae4af21b.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/17.a1692f8c.js → docs/assets/js/17.1abba793.js

File diff suppressed because one or more lines are too long

1
docs/assets/js/18.f155b4c4.js

File diff suppressed because one or more lines are too long

1
docs/assets/js/18.f2013e09.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/19.73ad3cbf.js → docs/assets/js/19.d921948e.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/2.e0710957.js → docs/assets/js/2.ef91b2e4.js

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{175:function(t,n,e){},200:function(t,n,e){"use strict";var i=e(175);e.n(i).a},247:function(t,n,e){"use strict";e.r(n);e(200);var i=e(1),s=Object(i.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"demo-container"},[this._t("default")],2)},[],!1,null,"b3715568",null);s.options.__file="Demo.vue";n.default=s.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{175:function(t,n,e){},200:function(t,n,e){"use strict";var i=e(175);e.n(i).a},243:function(t,n,e){"use strict";e.r(n);e(200);var i=e(1),s=Object(i.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"demo-container"},[this._t("default")],2)},[],!1,null,"b3715568",null);s.options.__file="Demo.vue";n.default=s.exports}}]);

2
docs/assets/js/20.75ba97b9.js → docs/assets/js/20.2a47ec70.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/21.f8fdd45a.js → docs/assets/js/21.c6421742.js

File diff suppressed because one or more lines are too long

1
docs/assets/js/22.4044a85d.js

File diff suppressed because one or more lines are too long

1
docs/assets/js/22.4baf2121.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/23.2c2b779d.js → docs/assets/js/23.c5587df3.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/24.e9c83a5a.js → docs/assets/js/24.c051f379.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/25.93c8f5c4.js → docs/assets/js/25.2f947e45.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/26.70b77d4d.js → docs/assets/js/26.7375acba.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/27.93b9607a.js → docs/assets/js/27.741f6722.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/28.ac3dfe4c.js → docs/assets/js/28.5040c972.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/29.995a1085.js → docs/assets/js/29.245014e9.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/3.f559383d.js → docs/assets/js/3.6f294650.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/30.d85f40d0.js → docs/assets/js/30.753c7cf4.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/31.f51ca3b9.js → docs/assets/js/31.7e89813a.js

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{226:function(t,s,e){"use strict";e.r(s);var n=e(1),i=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);i.options.__file="faq.md";s.default=i.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{227:function(t,s,e){"use strict";e.r(s);var n=e(1),i=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);i.options.__file="faq.md";s.default=i.exports}}]);

2
docs/assets/js/32.5594c9d1.js → docs/assets/js/32.fda19034.js

File diff suppressed because one or more lines are too long

1
docs/assets/js/33.3a04bb90.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/33.859da3a2.js → docs/assets/js/34.1814891c.js

File diff suppressed because one or more lines are too long

1
docs/assets/js/34.b904af9e.js

File diff suppressed because one or more lines are too long

1
docs/assets/js/35.0110eaf1.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/35.99bf53ef.js → docs/assets/js/36.01a0fc2b.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/36.22571463.js → docs/assets/js/37.8c59c319.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/37.53626b6c.js → docs/assets/js/38.8f378510.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/38.8b6b5d30.js → docs/assets/js/39.6a0c7106.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/4.04400a55.js → docs/assets/js/4.a4359865.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/39.5e641478.js → docs/assets/js/40.9ff909f0.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/40.57ed0411.js → docs/assets/js/41.92a37b1a.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/41.2630bc80.js → docs/assets/js/42.8a9f7180.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/5.3707b160.js → docs/assets/js/5.95c28380.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/6.18d0c9cd.js → docs/assets/js/6.cb35c750.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/7.c350e425.js → docs/assets/js/7.53f8b5b8.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/8.1b58d36f.js → docs/assets/js/8.d4eeeb94.js

File diff suppressed because one or more lines are too long

2
docs/assets/js/9.5d43eed5.js → docs/assets/js/9.3ae8fade.js

File diff suppressed because one or more lines are too long

6
docs/assets/js/app.6dd0a6a0.js → docs/assets/js/app.1436e1a7.js

File diff suppressed because one or more lines are too long

BIN
docs/cssom-devtools.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
docs/cssom-result.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 205 KiB

6
docs/faq.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/31.f51ca3b9.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/31.7e89813a.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="faq"><a href="#faq" aria-hidden="true" class="header-anchor">#</a> FAQ</h1><p>Coming soon</p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/faq.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/9/2018, 12:48:25 AM</span></div></div><!----></div></div></div>
<script src="/docs/assets/js/31.f51ca3b9.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="faq"><a href="#faq" aria-hidden="true" class="header-anchor">#</a> FAQ</h1><p>Coming soon</p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/faq.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/9/2018, 12:48:25 AM</span></div></div><!----></div></div></div>
<script src="/docs/assets/js/31.7e89813a.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

6
docs/getting-started.html

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<meta name="keywords" content="grapesjs getting started">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/32.5594c9d1.js" as="script"><link rel="preload" href="/docs/assets/js/2.e0710957.js" as="script"><link rel="preload" href="/docs/assets/js/4.04400a55.js" as="script"><link rel="preload" href="/docs/assets/js/3.f559383d.js" as="script"><link rel="preload" href="/docs/assets/js/5.3707b160.js" as="script"><link rel="preload" href="/docs/assets/js/7.c350e425.js" as="script"><link rel="preload" href="/docs/assets/js/8.1b58d36f.js" as="script"><link rel="preload" href="/docs/assets/js/10.d8cb5231.js" as="script"><link rel="preload" href="/docs/assets/js/6.18d0c9cd.js" as="script"><link rel="preload" href="/docs/assets/js/9.5d43eed5.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/32.fda19034.js" as="script"><link rel="preload" href="/docs/assets/js/2.ef91b2e4.js" as="script"><link rel="preload" href="/docs/assets/js/4.a4359865.js" as="script"><link rel="preload" href="/docs/assets/js/3.6f294650.js" as="script"><link rel="preload" href="/docs/assets/js/5.95c28380.js" as="script"><link rel="preload" href="/docs/assets/js/7.53f8b5b8.js" as="script"><link rel="preload" href="/docs/assets/js/8.d4eeeb94.js" as="script"><link rel="preload" href="/docs/assets/js/10.9257e084.js" as="script"><link rel="preload" href="/docs/assets/js/6.cb35c750.js" as="script"><link rel="preload" href="/docs/assets/js/9.3ae8fade.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li></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.
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="getting-started"><a href="#getting-started" aria-hidden="true" class="header-anchor">#</a> Getting Started</h1><p>This 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;!--
@ -581,6 +581,6 @@ To complete our builder let's customize its color palette and to make it more vi
Asset Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/32.5594c9d1.js" defer></script><script src="/docs/assets/js/2.e0710957.js" defer></script><script src="/docs/assets/js/4.04400a55.js" defer></script><script src="/docs/assets/js/3.f559383d.js" defer></script><script src="/docs/assets/js/5.3707b160.js" defer></script><script src="/docs/assets/js/7.c350e425.js" defer></script><script src="/docs/assets/js/8.1b58d36f.js" defer></script><script src="/docs/assets/js/10.d8cb5231.js" defer></script><script src="/docs/assets/js/6.18d0c9cd.js" defer></script><script src="/docs/assets/js/9.5d43eed5.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/32.fda19034.js" defer></script><script src="/docs/assets/js/2.ef91b2e4.js" defer></script><script src="/docs/assets/js/4.a4359865.js" defer></script><script src="/docs/assets/js/3.6f294650.js" defer></script><script src="/docs/assets/js/5.95c28380.js" defer></script><script src="/docs/assets/js/7.53f8b5b8.js" defer></script><script src="/docs/assets/js/8.d4eeeb94.js" defer></script><script src="/docs/assets/js/10.9257e084.js" defer></script><script src="/docs/assets/js/6.cb35c750.js" defer></script><script src="/docs/assets/js/9.3ae8fade.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

214
docs/guides/Custom-CSS-parser.html

File diff suppressed because one or more lines are too long

15
docs/guides/Replace-Rich-Text-Editor.html

@ -6,10 +6,10 @@
<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.29">
<script src="../js/grapes.min.js?v0.14.29"></script>
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/33.859da3a2.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/34.1814891c.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="active sidebar-link">Replace Rich Text Editor</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#interface" class="sidebar-link">Interface</a></li><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#toolbar-position" class="sidebar-link">Toolbar position</a></li><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#the-built-in-vs-third-party" class="sidebar-link">The built-in vs third-party</a></li><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#plugins" class="sidebar-link">Plugins</a></li></ul></li></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>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="active sidebar-link">Replace Rich Text Editor</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#interface" class="sidebar-link">Interface</a></li><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#toolbar-position" class="sidebar-link">Toolbar position</a></li><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#the-built-in-vs-third-party" class="sidebar-link">The built-in vs third-party</a></li><li class="sidebar-sub-header"><a href="/docs/guides/Replace-Rich-Text-Editor.html#plugins" class="sidebar-link">Plugins</a></li></ul></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="replace-the-built-in-rich-text-editor"><a href="#replace-the-built-in-rich-text-editor" aria-hidden="true" class="header-anchor">#</a> Replace the built-in Rich Text Editor</h1><p>As you might have noticed the default Rich Text Editor (RTE) is really tiny and so doesn't seem like a complete solution as a text editor. Instead of showing how to add new commands inside the default one we'll show how to completely replace it with another one.</p><p>In the following guide we'll integrate the CKEditor and to accomplish this task we just need to provide few functions to the GrapesJS API method <code>setCustomRte</code> as an interface.</p><p></p><div class="table-of-contents"><ul><li><a href="#interface">Interface</a><ul><li><a href="#enable">Enable</a></li><li><a href="#disable">Disable</a></li><li><a href="#focus">Focus</a></li></ul></li><li><a href="#toolbar-position">Toolbar position</a></li><li><a href="#the-built-in-vs-third-party">The built-in vs third-party</a></li><li><a href="#plugins">Plugins</a></li></ul></div><p></p><h2 id="interface"><a href="#interface" aria-hidden="true" class="header-anchor">#</a> Interface</h2><h3 id="enable"><a href="#enable" aria-hidden="true" class="header-anchor">#</a> Enable</h3><p>The first step is to indicate how to enable the third-party library and so for we gonna start with the <code>enable()</code> function. This method should take care of the first initialization of our custom RTE but also for the next time is called on the same element, this is why there is the <code>rte</code> argument.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
editor<span class="token punctuation">.</span><span class="token function">setCustomRte</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">/**
* Enabling the custom RTE
@ -97,7 +97,10 @@ For example, when you create a link using the built-in RTE then you'll be able t
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/33.859da3a2.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
</a></span><span class="next"><a href="/docs/guides/Custom-CSS-parser.html">
Use Custom CSS Parser
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/34.1814891c.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

6
docs/index.html

File diff suppressed because one or more lines are too long

19
docs/modules/Assets.html

@ -6,10 +6,10 @@
<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.29">
<script src="../js/grapes.min.js?v0.14.29"></script>
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/34.b904af9e.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/35.0110eaf1.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li></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>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="asset-manager"><a href="#asset-manager" aria-hidden="true" class="header-anchor">#</a> Asset Manager</h1><p align="center"><img src="http://grapesjs.com/img/sc-grapesjs-assets-1.jpg" alt="GrapesJS - Asset Manager" align="center"></p><p>In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS, 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>
@ -62,6 +62,13 @@
<span class="token comment">// Custom parameters to pass with the upload request, eg. csrf token</span>
params<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// The credentials setting for the upload request, eg. 'include', 'omit'</span>
credentials<span class="token punctuation">:</span> <span class="token string">'include'</span><span class="token punctuation">,</span>
<span class="token comment">// Allow uploading multiple files per request.</span>
<span class="token comment">// If disabled filename will not have '[]' appended</span>
multiUpload<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token comment">// If true, tries to add automatically uploaded assets.</span>
<span class="token comment">// To make it work the server should respond with a JSON containing assets</span>
<span class="token comment">// in a data key, eg:</span>
@ -353,13 +360,13 @@ editor<span class="token punctuation">.</span><span class="token function">on</s
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">
</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">9/17/2018, 3:16:58 AM</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/34.b904af9e.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/35.0110eaf1.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

10
docs/modules/Blocks.html

@ -6,10 +6,10 @@
<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.29">
<script src="../js/grapes.min.js?v0.14.29"></script>
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/35.99bf53ef.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/36.01a0fc2b.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li></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>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="block-manager"><a href="#block-manager" aria-hidden="true" class="header-anchor">#</a> Block Manager</h1><p align="center"><img src="http://grapesjs.com/img/sc-grapesjs-blocks-prp.jpg" alt="GrapesJS - Block Manager" height="400" align="center"></p><p>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>
@ -68,6 +68,6 @@ https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js<
Component Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/35.99bf53ef.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/36.01a0fc2b.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

10
docs/modules/Components-js.html

@ -6,10 +6,10 @@
<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.29">
<script src="../js/grapes.min.js?v0.14.29"></script>
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/36.22571463.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/37.8c59c319.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li></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>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="components-js"><a href="#components-js" aria-hidden="true" class="header-anchor">#</a> Components &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>
@ -163,6 +163,6 @@ script<span class="token punctuation">:</span> <span class="token keyword">funct
Trait Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/36.22571463.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/37.8c59c319.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

10
docs/modules/Components.html

@ -6,10 +6,10 @@
<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.29">
<script src="../js/grapes.min.js?v0.14.29"></script>
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/37.53626b6c.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/38.8f378510.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li></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>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="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>
@ -191,6 +191,6 @@ comps<span class="token punctuation">.</span><span class="token function">addTyp
Components &amp; JS
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/37.53626b6c.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/38.8f378510.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

10
docs/modules/Plugins.html

@ -6,10 +6,10 @@
<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.29">
<script src="../js/grapes.min.js?v0.14.29"></script>
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/38.8b6b5d30.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/39.6a0c7106.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="active sidebar-link">Plugins</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#basic-plugin" class="sidebar-link">Basic plugin</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#named-plugin" class="sidebar-link">Named plugin</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#plugins-with-options" class="sidebar-link">Plugins with options</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#named-plugins-vs-non-named-plugins" class="sidebar-link">Named Plugins vs Non-Named Plugins</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#boilerplate" class="sidebar-link">Boilerplate</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#popular-plugins" class="sidebar-link">Popular Plugins</a></li></ul></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="plugins"><a href="#plugins" aria-hidden="true" class="header-anchor">#</a> Plugins</h1><p>Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.</p><p></p><div class="table-of-contents"><ul><li><a href="#basic-plugin">Basic plugin</a></li><li><a href="#named-plugin">Named plugin</a></li><li><a href="#plugins-with-options">Plugins with options</a></li><li><a href="#named-plugins-vs-non-named-plugins">Named Plugins vs Non-Named Plugins</a></li><li><a href="#boilerplate">Boilerplate</a></li><li><a href="#popular-plugins">Popular Plugins</a></li></ul></div><p></p><h2 id="basic-plugin"><a href="#basic-plugin" aria-hidden="true" class="header-anchor">#</a> Basic plugin</h2><p>The most simple plugins are just functions that are run when the editor is being built.</p><div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">function</span> <span class="token function">myPlugin</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">{</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="active sidebar-link">Plugins</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#basic-plugin" class="sidebar-link">Basic plugin</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#named-plugin" class="sidebar-link">Named plugin</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#plugins-with-options" class="sidebar-link">Plugins with options</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#named-plugins-vs-non-named-plugins" class="sidebar-link">Named Plugins vs Non-Named Plugins</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#boilerplate" class="sidebar-link">Boilerplate</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Plugins.html#popular-plugins" class="sidebar-link">Popular Plugins</a></li></ul></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="plugins"><a href="#plugins" aria-hidden="true" class="header-anchor">#</a> Plugins</h1><p>Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.</p><p></p><div class="table-of-contents"><ul><li><a href="#basic-plugin">Basic plugin</a></li><li><a href="#named-plugin">Named plugin</a></li><li><a href="#plugins-with-options">Plugins with options</a></li><li><a href="#named-plugins-vs-non-named-plugins">Named Plugins vs Non-Named Plugins</a></li><li><a href="#boilerplate">Boilerplate</a></li><li><a href="#popular-plugins">Popular Plugins</a></li></ul></div><p></p><h2 id="basic-plugin"><a href="#basic-plugin" aria-hidden="true" class="header-anchor">#</a> Basic plugin</h2><p>The most simple plugins are just functions that are run when the editor is being built.</p><div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">function</span> <span class="token function">myPlugin</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">{</span>
editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'my-first-block'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
label<span class="token punctuation">:</span> <span class="token string">'Simple block'</span><span class="token punctuation">,</span>
content<span class="token punctuation">:</span> <span class="token string">'&lt;div class=&quot;my-block&quot;&gt;This is a simple block&lt;/div&gt;'</span><span class="token punctuation">,</span>
@ -100,6 +100,6 @@
Replace Rich Text Editor
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/38.8b6b5d30.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/39.6a0c7106.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

10
docs/modules/Storage.html

@ -6,10 +6,10 @@
<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.29">
<script src="../js/grapes.min.js?v0.14.29"></script>
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/39.5e641478.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/40.9ff909f0.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#basic-configuration" class="sidebar-link">Basic configuration</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#setup-remote-storage" class="sidebar-link">Setup remote storage</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#store-and-load-templates" class="sidebar-link">Store and load templates</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#setup-the-server" class="sidebar-link">Setup the server</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#storage-api" class="sidebar-link">Storage API</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li></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>.
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#basic-configuration" class="sidebar-link">Basic configuration</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#setup-remote-storage" class="sidebar-link">Setup remote storage</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#store-and-load-templates" class="sidebar-link">Store and load templates</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#setup-the-server" class="sidebar-link">Setup the server</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#storage-api" class="sidebar-link">Storage API</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="storage-manager"><a href="#storage-manager" aria-hidden="true" class="header-anchor">#</a> Storage Manager</h1><p>The aim of this guide is to show how to setup correctly your storage configuration for common usages of the editor and explain also some additional advanced settings</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>This guide requires GrapesJS v0.14.15 or higher</p></div><p></p><div class="table-of-contents"><ul><li><a href="#basic-configuration">Basic configuration</a></li><li><a href="#setup-remote-storage">Setup remote storage</a></li><li><a href="#store-and-load-templates">Store and load templates</a></li><li><a href="#setup-the-server">Setup the server</a></li><li><a href="#storage-api">Storage API</a><ul><li><a href="#define-new-storage">Define new storage</a></li><li><a href="#extend-storage">Extend storage</a></li><li><a href="#examples">Examples</a></li></ul></li><li><a href="#events">Events</a></li></ul></div><p></p><h2 id="basic-configuration"><a href="#basic-configuration" aria-hidden="true" class="header-anchor">#</a> Basic configuration</h2><p>The storage manager is a built-in module implemented inside GrapesJS which allows the persistence of your data. By default, GrapesJS saves the data locally by using the built-in <code>LocalStorage</code> which just leverages <a href="https://developer.mozilla.org/it/docs/Web/API/Window/localStorage" target="_blank" rel="noopener noreferrer">localStorage API<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.
You can initialize the editor with different storage configurations via <code>storageManager</code> option:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token operator">...</span>
<span class="token comment">// Default configurations</span>
@ -192,6 +192,6 @@ editor<span class="token punctuation">.</span><span class="token function">on</s
Plugins
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/39.5e641478.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/40.9ff909f0.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

10
docs/modules/Style-manager.html

@ -6,10 +6,10 @@
<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.29">
<script src="../js/grapes.min.js?v0.14.29"></script>
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/40.57ed0411.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/41.2630bc80.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/41.92a37b1a.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/42.8a9f7180.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li></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>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="style-manager"><a href="#style-manager" aria-hidden="true" class="header-anchor">#</a> Style Manager</h1><p>Coming soon</p><p></p><div class="table-of-contents"><ul><li><a href="#built-in-properties">Built-in properties</a></li></ul></div><p></p><h2 id="built-in-properties"><a href="#built-in-properties" aria-hidden="true" class="header-anchor">#</a> Built-in properties</h2><p>Here you can find all the available built-in properties that you can use inside Style Manager via <code>buildProps</code>:</p><p><code>float</code>, <code>position</code>, <code>text-align</code>, <code>display</code>, <code>font-family</code>, <code>font-weight</code>, <code>border</code>, <code>border-style</code>, <code>border-color</code>, <code>border-width</code>, <code>box-shadow</code>, <code>background-repeat</code>, <code>background-position</code>, <code>background-attachment</code>, <code>background-size</code>, <code>transition</code>, <code>transition-duration</code>, <code>transition-property</code>, <code>transition-timing-function</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>margin</code>, <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code>, <code>padding</code>, <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>, <code>width</code>, <code>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>
@ -45,6 +45,6 @@
Storage Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/40.57ed0411.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/41.92a37b1a.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

10
docs/modules/Traits.html

@ -6,10 +6,10 @@
<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.29">
<script src="../js/grapes.min.js?v0.14.29"></script>
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.14.33">
<script src="../js/grapes.min.js?v0.14.33"></script>
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.6dd0a6a0.js" as="script"><link rel="preload" href="/docs/assets/js/41.2630bc80.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.75ba97b9.js"><link rel="prefetch" href="/docs/assets/js/2.e0710957.js"><link rel="prefetch" href="/docs/assets/js/3.f559383d.js"><link rel="prefetch" href="/docs/assets/js/4.04400a55.js"><link rel="prefetch" href="/docs/assets/js/5.3707b160.js"><link rel="prefetch" href="/docs/assets/js/6.18d0c9cd.js"><link rel="prefetch" href="/docs/assets/js/7.c350e425.js"><link rel="prefetch" href="/docs/assets/js/8.1b58d36f.js"><link rel="prefetch" href="/docs/assets/js/9.5d43eed5.js"><link rel="prefetch" href="/docs/assets/js/10.d8cb5231.js"><link rel="prefetch" href="/docs/assets/js/11.69c18b86.js"><link rel="prefetch" href="/docs/assets/js/12.f79c3787.js"><link rel="prefetch" href="/docs/assets/js/13.3373dd40.js"><link rel="prefetch" href="/docs/assets/js/14.8a2ce59f.js"><link rel="prefetch" href="/docs/assets/js/15.483a1808.js"><link rel="prefetch" href="/docs/assets/js/16.b70b4495.js"><link rel="prefetch" href="/docs/assets/js/17.a1692f8c.js"><link rel="prefetch" href="/docs/assets/js/18.f2013e09.js"><link rel="prefetch" href="/docs/assets/js/19.73ad3cbf.js"><link rel="prefetch" href="/docs/assets/js/21.f8fdd45a.js"><link rel="prefetch" href="/docs/assets/js/22.4baf2121.js"><link rel="prefetch" href="/docs/assets/js/23.2c2b779d.js"><link rel="prefetch" href="/docs/assets/js/24.e9c83a5a.js"><link rel="prefetch" href="/docs/assets/js/25.93c8f5c4.js"><link rel="prefetch" href="/docs/assets/js/26.70b77d4d.js"><link rel="prefetch" href="/docs/assets/js/27.93b9607a.js"><link rel="prefetch" href="/docs/assets/js/28.ac3dfe4c.js"><link rel="prefetch" href="/docs/assets/js/29.995a1085.js"><link rel="prefetch" href="/docs/assets/js/30.d85f40d0.js"><link rel="prefetch" href="/docs/assets/js/31.f51ca3b9.js"><link rel="prefetch" href="/docs/assets/js/32.5594c9d1.js"><link rel="prefetch" href="/docs/assets/js/33.859da3a2.js"><link rel="prefetch" href="/docs/assets/js/34.b904af9e.js"><link rel="prefetch" href="/docs/assets/js/35.99bf53ef.js"><link rel="prefetch" href="/docs/assets/js/36.22571463.js"><link rel="prefetch" href="/docs/assets/js/37.53626b6c.js"><link rel="prefetch" href="/docs/assets/js/38.8b6b5d30.js"><link rel="prefetch" href="/docs/assets/js/39.5e641478.js"><link rel="prefetch" href="/docs/assets/js/40.57ed0411.js">
<link rel="preload" href="/docs/assets/css/0.styles.82db7b1e.css" as="style"><link rel="preload" href="/docs/assets/js/app.1436e1a7.js" as="script"><link rel="preload" href="/docs/assets/js/42.8a9f7180.js" as="script"><link rel="prefetch" href="/docs/assets/js/20.2a47ec70.js"><link rel="prefetch" href="/docs/assets/js/2.ef91b2e4.js"><link rel="prefetch" href="/docs/assets/js/3.6f294650.js"><link rel="prefetch" href="/docs/assets/js/4.a4359865.js"><link rel="prefetch" href="/docs/assets/js/5.95c28380.js"><link rel="prefetch" href="/docs/assets/js/6.cb35c750.js"><link rel="prefetch" href="/docs/assets/js/7.53f8b5b8.js"><link rel="prefetch" href="/docs/assets/js/8.d4eeeb94.js"><link rel="prefetch" href="/docs/assets/js/9.3ae8fade.js"><link rel="prefetch" href="/docs/assets/js/10.9257e084.js"><link rel="prefetch" href="/docs/assets/js/11.663618dd.js"><link rel="prefetch" href="/docs/assets/js/12.9c91baa4.js"><link rel="prefetch" href="/docs/assets/js/13.b7167e90.js"><link rel="prefetch" href="/docs/assets/js/14.1d09f9af.js"><link rel="prefetch" href="/docs/assets/js/15.f4316c4a.js"><link rel="prefetch" href="/docs/assets/js/16.ae4af21b.js"><link rel="prefetch" href="/docs/assets/js/17.1abba793.js"><link rel="prefetch" href="/docs/assets/js/18.f155b4c4.js"><link rel="prefetch" href="/docs/assets/js/19.d921948e.js"><link rel="prefetch" href="/docs/assets/js/21.c6421742.js"><link rel="prefetch" href="/docs/assets/js/22.4044a85d.js"><link rel="prefetch" href="/docs/assets/js/23.c5587df3.js"><link rel="prefetch" href="/docs/assets/js/24.c051f379.js"><link rel="prefetch" href="/docs/assets/js/25.2f947e45.js"><link rel="prefetch" href="/docs/assets/js/26.7375acba.js"><link rel="prefetch" href="/docs/assets/js/27.741f6722.js"><link rel="prefetch" href="/docs/assets/js/28.5040c972.js"><link rel="prefetch" href="/docs/assets/js/29.245014e9.js"><link rel="prefetch" href="/docs/assets/js/30.753c7cf4.js"><link rel="prefetch" href="/docs/assets/js/31.7e89813a.js"><link rel="prefetch" href="/docs/assets/js/32.fda19034.js"><link rel="prefetch" href="/docs/assets/js/33.3a04bb90.js"><link rel="prefetch" href="/docs/assets/js/34.1814891c.js"><link rel="prefetch" href="/docs/assets/js/35.0110eaf1.js"><link rel="prefetch" href="/docs/assets/js/36.01a0fc2b.js"><link rel="prefetch" href="/docs/assets/js/37.8c59c319.js"><link rel="prefetch" href="/docs/assets/js/38.8f378510.js"><link rel="prefetch" href="/docs/assets/js/39.6a0c7106.js"><link rel="prefetch" href="/docs/assets/js/40.9ff909f0.js"><link rel="prefetch" href="/docs/assets/js/41.92a37b1a.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.82db7b1e.css">
</head>
<body>
@ -27,7 +27,7 @@
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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li></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>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="trait-manager"><a href="#trait-manager" aria-hidden="true" class="header-anchor">#</a> Trait Manager</h1><p>In GrapesJS, Traits 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>
@ -125,6 +125,6 @@ traits<span class="token punctuation">:</span> <span class="token punctuation">[
Style Manager
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/41.2630bc80.js" defer></script><script src="/docs/assets/js/app.6dd0a6a0.js" defer></script>
<script src="/docs/assets/js/42.8a9f7180.js" defer></script><script src="/docs/assets/js/app.1436e1a7.js" defer></script>
</body>
</html>

Loading…
Cancel
Save