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

deploy docs

gh-pages
Artur Arseniev 7 years ago
parent
485bda3815
commit
d8d53335e0
127 changed files with 538 additions and 543 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      docs/404.html
  2. 10
      docs/Home.html
  3. 10
      docs/api/assets.html
  4. 10
      docs/api/block_manager.html
  5. 14
      docs/api/canvas.html
  6. 10
      docs/api/commands.html
  7. 12
      docs/api/component.html
  8. 10
      docs/api/components.html
  9. 10
      docs/api/css_composer.html
  10. 19
      docs/api/device_manager.html
  11. 22
      docs/api/editor.html
  12. 79
      docs/api/i18n.html
  13. 10
      docs/api/index.html
  14. 10
      docs/api/keymaps.html
  15. 10
      docs/api/modal_dialog.html
  16. 10
      docs/api/panels.html
  17. 12
      docs/api/rich_text_editor.html
  18. 10
      docs/api/selector_manager.html
  19. 10
      docs/api/storage_manager.html
  20. 12
      docs/api/style_manager.html
  21. 10
      docs/api/undo_manager.html
  22. BIN
      docs/assets-builtin-modal.png
  23. BIN
      docs/assets-empty-view.png
  24. BIN
      docs/assets-svg-view.png
  25. BIN
      docs/assets-uploader.png
  26. 0
      docs/assets/css/1.styles.b40e6662.css
  27. 0
      docs/assets/css/2.styles.896e948d.css
  28. 0
      docs/assets/css/3.styles.46968bd4.css
  29. 0
      docs/assets/css/4.styles.79691bb5.css
  30. 0
      docs/assets/css/5.styles.6013373a.css
  31. 0
      docs/assets/css/6.styles.467c19a2.css
  32. 0
      docs/assets/css/7.styles.ce9d181d.css
  33. 0
      docs/assets/css/8.styles.aae17ac6.css
  34. 0
      docs/assets/css/9.styles.e0170b17.css
  35. 0
      docs/assets/css/styles.e1f2d947.css
  36. 2
      docs/assets/img/search.83621669.svg
  37. 2
      docs/assets/js/1.b40e6662.js
  38. 2
      docs/assets/js/10.e7cd7c26.js
  39. 2
      docs/assets/js/11.3f87b9b8.js
  40. 2
      docs/assets/js/12.269b5586.js
  41. 2
      docs/assets/js/13.e52ea678.js
  42. 2
      docs/assets/js/14.0606827a.js
  43. 2
      docs/assets/js/15.aa7f42f8.js
  44. 2
      docs/assets/js/16.959c0bd7.js
  45. 2
      docs/assets/js/17.bfba947e.js
  46. 2
      docs/assets/js/18.7f401ffb.js
  47. 2
      docs/assets/js/19.3e0ce3c8.js
  48. 2
      docs/assets/js/2.896e948d.js
  49. 2
      docs/assets/js/20.f4502040.js
  50. 1
      docs/assets/js/21.06e8e22c.js
  51. 1
      docs/assets/js/21.2babea6a.js
  52. 1
      docs/assets/js/22.26e5d9ed.js
  53. 1
      docs/assets/js/22.fdc81ae8.js
  54. 1
      docs/assets/js/23.a2c9ec17.js
  55. 2
      docs/assets/js/24.f9675b16.js
  56. 2
      docs/assets/js/25.b52924ae.js
  57. 2
      docs/assets/js/26.81c00685.js
  58. 2
      docs/assets/js/27.7372785c.js
  59. 2
      docs/assets/js/28.df5c22ed.js
  60. 2
      docs/assets/js/29.b167a894.js
  61. 2
      docs/assets/js/3.46968bd4.js
  62. 2
      docs/assets/js/30.d165faf7.js
  63. 2
      docs/assets/js/31.334d7953.js
  64. 2
      docs/assets/js/32.f9daa2c8.js
  65. 2
      docs/assets/js/33.93f49bfa.js
  66. 2
      docs/assets/js/34.4865e6c3.js
  67. 2
      docs/assets/js/35.9d089775.js
  68. 2
      docs/assets/js/36.67cb8d1f.js
  69. 2
      docs/assets/js/37.708a94ac.js
  70. 2
      docs/assets/js/38.0f8df29b.js
  71. 1
      docs/assets/js/38.c84dae85.js
  72. 2
      docs/assets/js/39.074f3faf.js
  73. 2
      docs/assets/js/4.79691bb5.js
  74. 2
      docs/assets/js/40.cef45f06.js
  75. 1
      docs/assets/js/41.b60d8fe8.js
  76. 1
      docs/assets/js/41.c734b929.js
  77. 1
      docs/assets/js/42.1078a060.js
  78. 2
      docs/assets/js/43.7188da01.js
  79. 2
      docs/assets/js/44.1fd52e91.js
  80. 2
      docs/assets/js/45.69c67864.js
  81. 2
      docs/assets/js/5.6013373a.js
  82. 2
      docs/assets/js/6.467c19a2.js
  83. 2
      docs/assets/js/7.ce9d181d.js
  84. 2
      docs/assets/js/8.aae17ac6.js
  85. 2
      docs/assets/js/9.e0170b17.js
  86. 6
      docs/assets/js/app.e1f2d947.js
  87. BIN
      docs/block-custom-render.jpg
  88. BIN
      docs/block-custom-render2.jpg
  89. BIN
      docs/blocks3.jpg
  90. BIN
      docs/btn-clicked.png
  91. BIN
      docs/canvas-panels.jpg
  92. 69
      docs/component-type-stack.svg
  93. BIN
      docs/cssom-devtools.png
  94. BIN
      docs/cssom-result.jpg
  95. BIN
      docs/default-gjs.jpg
  96. BIN
      docs/default-link-comp.jpg
  97. BIN
      docs/default-sm.jpg
  98. BIN
      docs/default-traits.png
  99. BIN
      docs/demo-view.png
  100. BIN
      docs/docs-init-link-trait.jpg

10
docs/404.html
View File

@ -8,12 +8,12 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1><blockquote>There's nothing here.</blockquote><a href="/docs/" class="router-link-active">Take me home.</a></div></div></div> <div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1><blockquote>Looks like we've got some broken links.</blockquote><a href="/docs/" class="router-link-active">Take me home.</a></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script>
</body> </body>
</html> </html>

10
docs/Home.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/11.ff965783.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/11.3f87b9b8.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Components</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Traits</a></li><li><a href="/docs/modules/Style-manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/modules/Storage.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="getting-started"><a href="#getting-started" aria-hidden="true" class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&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 id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/modules/Components.html" class="sidebar-link">Components</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components &amp; JS</a></li><li><a href="/docs/modules/I18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Traits</a></li><li><a href="/docs/modules/Style-manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/modules/Storage.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="getting-started"><a href="#getting-started" aria-hidden="true" class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&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"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>path/to/grapes.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>gjs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>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 punctuation">}</span>
<span class="token operator">...</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> </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/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/11.ff965783.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/11.3f87b9b8.js" defer></script>
</body> </body>
</html> </html>

10
docs/api/assets.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/14.6e7b3ed3.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/14.0606827a.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="active sidebar-link">Asset Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/assets.html#assetmanager" class="sidebar-link">AssetManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#getallvisible" class="sidebar-link">getAllVisible</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#store" class="sidebar-link">store</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#load" class="sidebar-link">load</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#getcontainer" class="sidebar-link">getContainer</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#getassetsel" class="sidebar-link">getAssetsEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#render" class="sidebar-link">render</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#addtype" class="sidebar-link">addType</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#gettype" class="sidebar-link">getType</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#gettypes" class="sidebar-link">getTypes</a></li></ul></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="assetmanager"><a href="#assetmanager" aria-hidden="true" class="header-anchor">#</a> AssetManager</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="active sidebar-link">Asset Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/assets.html#assetmanager" class="sidebar-link">AssetManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#getallvisible" class="sidebar-link">getAllVisible</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#store" class="sidebar-link">store</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#load" class="sidebar-link">load</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#getcontainer" class="sidebar-link">getContainer</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#getassetsel" class="sidebar-link">getAssetsEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#render" class="sidebar-link">render</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#addtype" class="sidebar-link">addType</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#gettype" class="sidebar-link">getType</a></li><li class="sidebar-sub-header"><a href="/docs/api/assets.html#gettypes" class="sidebar-link">getTypes</a></li></ul></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="assetmanager"><a href="#assetmanager" aria-hidden="true" class="header-anchor">#</a> AssetManager</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
assetManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> assetManager<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span> <span class="token comment">// options</span>
<span class="token punctuation">}</span> <span class="token punctuation">}</span>
@ -80,6 +80,6 @@ passed entity</li></ul><h3 id="examples-7"><a href="#examples-7" aria-hidden="tr
Block Manager Block Manager
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/14.6e7b3ed3.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/14.0606827a.js" defer></script>
</body> </body>
</html> </html>

10
docs/api/block_manager.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/15.1abf69e4.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/15.aa7f42f8.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="active sidebar-link">Block Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#blockmanager" class="sidebar-link">BlockManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#onload" class="sidebar-link">onLoad</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getallvisible" class="sidebar-link">getAllVisible</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getcategories" class="sidebar-link">getCategories</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getcontainer" class="sidebar-link">getContainer</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#render" class="sidebar-link">render</a></li></ul></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="blockmanager"><a href="#blockmanager" aria-hidden="true" class="header-anchor">#</a> BlockManager</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="active sidebar-link">Block Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#blockmanager" class="sidebar-link">BlockManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#onload" class="sidebar-link">onLoad</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getallvisible" class="sidebar-link">getAllVisible</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getcategories" class="sidebar-link">getCategories</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#getcontainer" class="sidebar-link">getContainer</a></li><li class="sidebar-sub-header"><a href="/docs/api/block_manager.html#render" class="sidebar-link">render</a></li></ul></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="blockmanager"><a href="#blockmanager" aria-hidden="true" class="header-anchor">#</a> BlockManager</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
blockManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> blockManager<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span> <span class="token comment">// options</span>
<span class="token punctuation">}</span> <span class="token punctuation">}</span>
@ -80,6 +80,6 @@ document<span class="token punctuation">.</span><span class="token function">get
Commands Commands
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/15.1abf69e4.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/15.aa7f42f8.js" defer></script>
</body> </body>
</html> </html>

14
docs/api/canvas.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/16.ec6c5cc6.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/16.959c0bd7.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="active sidebar-link">Canvas</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#canvas" class="sidebar-link">Canvas</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getelement" class="sidebar-link">getElement</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getframeel" class="sidebar-link">getFrameEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getwindow" class="sidebar-link">getWindow</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getdocument" class="sidebar-link">getDocument</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getbody" class="sidebar-link">getBody</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getwrapperel" class="sidebar-link">getWrapperEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#setcustombadgelabel" class="sidebar-link">setCustomBadgeLabel</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getrect" class="sidebar-link">getRect</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#hasfocus" class="sidebar-link">hasFocus</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#scrollto" class="sidebar-link">scrollTo</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#setzoom" class="sidebar-link">setZoom</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getzoom" class="sidebar-link">getZoom</a></li></ul></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="canvas"><a href="#canvas" aria-hidden="true" class="header-anchor">#</a> Canvas</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="active sidebar-link">Canvas</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#canvas" class="sidebar-link">Canvas</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getelement" class="sidebar-link">getElement</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getframeel" class="sidebar-link">getFrameEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getwindow" class="sidebar-link">getWindow</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getdocument" class="sidebar-link">getDocument</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getbody" class="sidebar-link">getBody</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getwrapperel" class="sidebar-link">getWrapperEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#setcustombadgelabel" class="sidebar-link">setCustomBadgeLabel</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getrect" class="sidebar-link">getRect</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#hasfocus" class="sidebar-link">hasFocus</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#scrollto" class="sidebar-link">scrollTo</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#setzoom" class="sidebar-link">setZoom</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getzoom" class="sidebar-link">getZoom</a></li></ul></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="canvas"><a href="#canvas" aria-hidden="true" class="header-anchor">#</a> Canvas</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
canvas<span class="token punctuation">:</span> <span class="token punctuation">{</span> canvas<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span> <span class="token comment">// options</span>
<span class="token punctuation">}</span> <span class="token punctuation">}</span>
@ -46,12 +46,12 @@ canvas<span class="token punctuation">.</span><span class="token function">scrol
<span class="token comment">// Force the scroll, even if the element is alredy visible</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> 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><h2 id="setzoom"><a href="#setzoom" aria-hidden="true" class="header-anchor">#</a> setZoom</h2><p>Set zoom value</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>value</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="noopener noreferrer">Number<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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> The zoom value, from 0 to 100</li></ul><p>Returns <strong>this</strong></p><h2 id="getzoom"><a href="#getzoom" aria-hidden="true" class="header-anchor">#</a> getZoom</h2><p>Get zoom value</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="noopener noreferrer">Number<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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/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">5/2/2019, 1:28:33 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> </code></pre></div><h2 id="setzoom"><a href="#setzoom" aria-hidden="true" class="header-anchor">#</a> setZoom</h2><p>Set zoom value</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>value</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="noopener noreferrer">Number<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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> The zoom value, from 0 to 100</li></ul><p>Returns <strong>this</strong></p><h2 id="getzoom"><a href="#getzoom" aria-hidden="true" class="header-anchor">#</a> getZoom</h2><p>Get zoom value</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="noopener noreferrer">Number<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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/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">5/2/2019, 1:28:33 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/api/editor.html" class="prev"> ← <a href="/docs/api/i18n.html" class="prev">
Editor I18n
</a></span><span class="next"><a href="/docs/api/assets.html"> </a></span><span class="next"><a href="/docs/api/assets.html">
Asset Manager Asset Manager
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/16.ec6c5cc6.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/16.959c0bd7.js" defer></script>
</body> </body>
</html> </html>

10
docs/api/commands.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/17.46fbba7f.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/17.bfba947e.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="active sidebar-link">Commands</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/commands.html#commands" class="sidebar-link">Commands</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#extend" class="sidebar-link">extend</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#has" class="sidebar-link">has</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#run" class="sidebar-link">run</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#stop" class="sidebar-link">stop</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#isactive" class="sidebar-link">isActive</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#getactive" class="sidebar-link">getActive</a></li></ul></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="commands"><a href="#commands" aria-hidden="true" class="header-anchor">#</a> Commands</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="active sidebar-link">Commands</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/commands.html#commands" class="sidebar-link">Commands</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#extend" class="sidebar-link">extend</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#has" class="sidebar-link">has</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#run" class="sidebar-link">run</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#stop" class="sidebar-link">stop</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#isactive" class="sidebar-link">isActive</a></li><li class="sidebar-sub-header"><a href="/docs/api/commands.html#getactive" class="sidebar-link">getActive</a></li></ul></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="commands"><a href="#commands" aria-hidden="true" class="header-anchor">#</a> Commands</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
commands<span class="token punctuation">:</span> <span class="token punctuation">{</span> commands<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span> <span class="token comment">// options</span>
<span class="token punctuation">}</span> <span class="token punctuation">}</span>
@ -71,6 +71,6 @@ commands<span class="token punctuation">.</span><span class="token function">isA
DOM Components DOM Components
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/17.46fbba7f.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/17.bfba947e.js" defer></script>
</body> </body>
</html> </html>

12
docs/api/component.html
View File

File diff suppressed because one or more lines are too long

10
docs/api/components.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/19.a7157a72.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/19.3e0ce3c8.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="active sidebar-link">DOM Components</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/components.html#domcomponents" class="sidebar-link">DomComponents</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#load" class="sidebar-link">load</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#store" class="sidebar-link">store</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#getwrapper" class="sidebar-link">getWrapper</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#getcomponents" class="sidebar-link">getComponents</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#addcomponent" class="sidebar-link">addComponent</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#render" class="sidebar-link">render</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#clear" class="sidebar-link">clear</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#addtype" class="sidebar-link">addType</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#gettype" class="sidebar-link">getType</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#removetype" class="sidebar-link">removeType</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#gettypes" class="sidebar-link">getTypes</a></li></ul></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="domcomponents"><a href="#domcomponents" aria-hidden="true" class="header-anchor">#</a> DomComponents</h2><p>With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</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="active sidebar-link">DOM Components</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/components.html#domcomponents" class="sidebar-link">DomComponents</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#load" class="sidebar-link">load</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#store" class="sidebar-link">store</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#getwrapper" class="sidebar-link">getWrapper</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#getcomponents" class="sidebar-link">getComponents</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#addcomponent" class="sidebar-link">addComponent</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#render" class="sidebar-link">render</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#clear" class="sidebar-link">clear</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#addtype" class="sidebar-link">addType</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#gettype" class="sidebar-link">getType</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#removetype" class="sidebar-link">removeType</a></li><li class="sidebar-sub-header"><a href="/docs/api/components.html#gettypes" class="sidebar-link">getTypes</a></li></ul></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="domcomponents"><a href="#domcomponents" aria-hidden="true" class="header-anchor">#</a> DomComponents</h2><p>With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
domComponents<span class="token punctuation">:</span> <span class="token punctuation">{</span> domComponents<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span> <span class="token comment">// options</span>
<span class="token punctuation">}</span> <span class="token punctuation">}</span>
@ -86,6 +86,6 @@ Read more about this in <a href="https://grapesjs.com/docs/modules/Components.ht
- Component - Component
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/19.a7157a72.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/19.3e0ce3c8.js" defer></script>
</body> </body>
</html> </html>

10
docs/api/css_composer.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/20.21e836be.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/20.f4502040.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="active sidebar-link">CSS Composer</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#csscomposer" class="sidebar-link">CssComposer</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#load" class="sidebar-link">load</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#store" class="sidebar-link">store</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#clear" class="sidebar-link">clear</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#setrule" class="sidebar-link">setRule</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#getrule" class="sidebar-link">getRule</a></li></ul></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="csscomposer"><a href="#csscomposer" aria-hidden="true" class="header-anchor">#</a> CssComposer</h2><p>This module contains and manage CSS rules for the template inside the canvas. <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="active sidebar-link">CSS Composer</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#csscomposer" class="sidebar-link">CssComposer</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#load" class="sidebar-link">load</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#store" class="sidebar-link">store</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#clear" class="sidebar-link">clear</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#setrule" class="sidebar-link">setRule</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#getrule" class="sidebar-link">getRule</a></li></ul></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="csscomposer"><a href="#csscomposer" aria-hidden="true" class="header-anchor">#</a> CssComposer</h2><p>This module contains and manage CSS rules for the template inside the canvas.
You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
cssComposer<span class="token punctuation">:</span> <span class="token punctuation">{</span> cssComposer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span> <span class="token comment">// options</span>
@ -79,6 +79,6 @@ console<span class="token punctuation">.</span><span class="token function">log<
Modal Modal
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/20.21e836be.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/20.f4502040.js" defer></script>
</body> </body>
</html> </html>

19
docs/api/device_manager.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/21.06e8e22c.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/21.2babea6a.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,15 +27,18 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="active sidebar-link">Device Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#devicemanager" class="sidebar-link">DeviceManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#getall" class="sidebar-link">getAll</a></li></ul></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="devicemanager"><a href="#devicemanager" aria-hidden="true" class="header-anchor">#</a> DeviceManager</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/device_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="active sidebar-link">Device Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#devicemanager" class="sidebar-link">DeviceManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/device_manager.html#getall" class="sidebar-link">getAll</a></li></ul></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="devicemanager"><a href="#devicemanager" aria-hidden="true" class="header-anchor">#</a> DeviceManager</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/device_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
deviceManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> deviceManager<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span> <span class="token comment">// options</span>
<span class="token punctuation">}</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> deviceManager <span class="token operator">=</span> editor<span class="token punctuation">.</span>DeviceManager<span class="token punctuation">;</span> </code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> deviceManager <span class="token operator">=</span> editor<span class="token punctuation">.</span>DeviceManager<span class="token punctuation">;</span>
</code></pre></div><ul><li><a href="#add">add</a></li><li><a href="#get">get</a></li><li><a href="#getAll">getAll</a></li></ul><h2 id="add"><a href="#add" aria-hidden="true" class="header-anchor">#</a> add</h2><p>Add new device to the collection. URLs are supposed to be unique</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Device name</li><li><code>width</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Width of the device</li><li><code>opts</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Custom options</li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>deviceManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'Tablet'</span><span class="token punctuation">,</span> <span class="token string">'900px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><ul><li><a href="#add">add</a></li><li><a href="#get">get</a></li><li><a href="#getAll">getAll</a></li></ul><h2 id="add"><a href="#add" aria-hidden="true" class="header-anchor">#</a> add</h2><p>Add new device to the collection. URLs are supposed to be unique</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Device id</li><li><code>width</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Width of the device</li><li><code>opts</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>?</strong> Custom options (optional, default <code>{}</code>)</li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>deviceManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'tablet'</span><span class="token punctuation">,</span> <span class="token string">'900px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
deviceManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'Tablet2'</span><span class="token punctuation">,</span> <span class="token string">'900px'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> deviceManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'tablet2'</span><span class="token punctuation">,</span> <span class="token string">'900px'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
height<span class="token punctuation">:</span> <span class="token string">'300px'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token string">'300px'</span><span class="token punctuation">,</span>
<span class="token comment">// At first, GrapesJS tries to localize the name by device id.</span>
<span class="token comment">// In case is not found, the `name` property is used (or `id` if name is missing)</span>
name<span class="token punctuation">:</span> <span class="token string">'Tablet 2'</span><span class="token punctuation">,</span>
widthMedia<span class="token punctuation">:</span> <span class="token string">'810px'</span><span class="token punctuation">,</span> <span class="token comment">// the width that will be used for the CSS media</span> widthMedia<span class="token punctuation">:</span> <span class="token string">'810px'</span><span class="token punctuation">,</span> <span class="token comment">// the width that will be used for the CSS media</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>Device</strong> Added device</p><h2 id="get"><a href="#get" aria-hidden="true" class="header-anchor">#</a> get</h2><p>Return device by name</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Name of the device</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> device <span class="token operator">=</span> deviceManager<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'Tablet'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><p>Returns <strong>Device</strong> Added device</p><h2 id="get"><a href="#get" aria-hidden="true" class="header-anchor">#</a> get</h2><p>Return device by name</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Name of the device</li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> device <span class="token operator">=</span> deviceManager<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'Tablet'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -44,13 +47,13 @@ console<span class="token punctuation">.</span><span class="token function">log<
</code></pre></div><h2 id="getall"><a href="#getall" aria-hidden="true" class="header-anchor">#</a> getAll</h2><p>Return all devices</p><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> devices <span class="token operator">=</span> deviceManager<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h2 id="getall"><a href="#getall" aria-hidden="true" class="header-anchor">#</a> getAll</h2><p>Return all devices</p><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> devices <span class="token operator">=</span> deviceManager<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>devices<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>devices<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// [{name: 'Desktop', width: ''}, ...]</span> <span class="token comment">// [{name: 'Desktop', width: ''}, ...]</span>
</code></pre></div><p>Returns <strong>Collection</strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/device_manager.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/8/2018, 11:31:47 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> </code></pre></div><p>Returns <strong>Collection</strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/device_manager.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">11/4/2019, 12:14:53 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/api/storage_manager.html" class="prev"> ← <a href="/docs/api/storage_manager.html" class="prev">
Storage Manager Storage Manager
</a></span><span class="next"><a href="/docs/api/selector_manager.html"> </a></span><span class="next"><a href="/docs/api/selector_manager.html">
Selector Manager Selector Manager
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/21.06e8e22c.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/21.2babea6a.js" defer></script>
</body> </body>
</html> </html>

22
docs/api/editor.html
View File

File diff suppressed because one or more lines are too long

79
docs/api/i18n.html
View File

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>GrapesJS</title>
<meta name="description" content="GrapesJS documentation">
<link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/23.a2c9ec17.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
GrapesJS
</span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">Docs</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link router-link-active">API Reference</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Support Us
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Twitter
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">Docs</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link router-link-active">API Reference</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Support Us
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Twitter
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="active sidebar-link">I18n</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/i18n.html#i18n" class="sidebar-link">I18n</a></li><li class="sidebar-sub-header"><a href="/docs/api/i18n.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/i18n.html#setlocale" class="sidebar-link">setLocale</a></li><li class="sidebar-sub-header"><a href="/docs/api/i18n.html#getlocale" class="sidebar-link">getLocale</a></li><li class="sidebar-sub-header"><a href="/docs/api/i18n.html#getmessages" class="sidebar-link">getMessages</a></li><li class="sidebar-sub-header"><a href="/docs/api/i18n.html#setmessages" class="sidebar-link">setMessages</a></li><li class="sidebar-sub-header"><a href="/docs/api/i18n.html#addmessages" class="sidebar-link">addMessages</a></li><li class="sidebar-sub-header"><a href="/docs/api/i18n.html#t" class="sidebar-link">t</a></li></ul></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="i18n"><a href="#i18n" aria-hidden="true" class="header-anchor">#</a> I18n</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/i18n/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
i18n<span class="token punctuation">:</span> <span class="token punctuation">{</span>
locale<span class="token punctuation">:</span> <span class="token string">'en'</span><span class="token punctuation">,</span>
localeFallback<span class="token punctuation">:</span> <span class="token string">'en'</span><span class="token punctuation">,</span>
messages<span class="token punctuation">:</span> <span class="token punctuation">{</span>
it<span class="token punctuation">:</span> <span class="token punctuation">{</span> hello<span class="token punctuation">:</span> <span class="token string">'Ciao'</span><span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> i18n <span class="token operator">=</span> editor<span class="token punctuation">.</span>I18n<span class="token punctuation">;</span>
</code></pre></div><h3 id="events"><a href="#events" aria-hidden="true" class="header-anchor">#</a> Events</h3><ul><li><code>i18n:add</code> - New set of messages is added</li><li><code>i18n:update</code> - The set of messages is updated</li><li><code>i18n:locale</code> - Locale changed</li></ul><h2 id="getconfig"><a href="#getconfig" aria-hidden="true" class="header-anchor">#</a> getConfig</h2><p>Get module configurations</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Configuration object</p><h2 id="setlocale"><a href="#setlocale" aria-hidden="true" class="header-anchor">#</a> setLocale</h2><p>Update current locale</p><h3 id="parameters"><a href="#parameters" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>locale</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Locale value</li></ul><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>i18n<span class="token punctuation">.</span><span class="token function">setLocale</span><span class="token punctuation">(</span><span class="token string">'it'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="getlocale"><a href="#getlocale" aria-hidden="true" class="header-anchor">#</a> getLocale</h2><p>Get current locale</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Current locale value</p><h2 id="getmessages"><a href="#getmessages" aria-hidden="true" class="header-anchor">#</a> getMessages</h2><p>Get all messages</p><h3 id="parameters-2"><a href="#parameters-2" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>lang</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>?</strong> Specify the language of messages to return</li><li><code>opts</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>?</strong> Options (optional, default <code>{}</code>)
<ul><li><code>opts.debug</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>?</strong> Show warnings in case of missing language</li></ul></li></ul><h3 id="examples-2"><a href="#examples-2" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>i18n<span class="token punctuation">.</span><span class="token function">getMessages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; { en: { hello: '...' }, ... }</span>
i18n<span class="token punctuation">.</span><span class="token function">getMessages</span><span class="token punctuation">(</span><span class="token string">'en'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; { hello: '...' }</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2 id="setmessages"><a href="#setmessages" aria-hidden="true" class="header-anchor">#</a> setMessages</h2><p>Set new set of messages</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>msg</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Set of messages</li></ul><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>i18n<span class="token punctuation">.</span><span class="token function">getMessages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }</span>
i18n<span class="token punctuation">.</span><span class="token function">setMessages</span><span class="token punctuation">(</span><span class="token punctuation">{</span> en<span class="token punctuation">:</span> <span class="token punctuation">{</span> msg2<span class="token punctuation">:</span> <span class="token string">'Msg 2 up'</span><span class="token punctuation">,</span> msg3<span class="token punctuation">:</span> <span class="token string">'Msg 3'</span><span class="token punctuation">,</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">// Set replaced</span>
i18n<span class="token punctuation">.</span><span class="token function">getMessages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; { en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } }</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="addmessages"><a href="#addmessages" aria-hidden="true" class="header-anchor">#</a> addMessages</h2><p>Update messages</p><h3 id="parameters-4"><a href="#parameters-4" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>msg</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Set of messages to add</li></ul><h3 id="examples-4"><a href="#examples-4" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>i18n<span class="token punctuation">.</span><span class="token function">getMessages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }</span>
i18n<span class="token punctuation">.</span><span class="token function">addMessages</span><span class="token punctuation">(</span><span class="token punctuation">{</span> en<span class="token punctuation">:</span> <span class="token punctuation">{</span> msg2<span class="token punctuation">:</span> <span class="token string">'Msg 2 up'</span><span class="token punctuation">,</span> msg3<span class="token punctuation">:</span> <span class="token string">'Msg 3'</span><span class="token punctuation">,</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">// Set updated</span>
i18n<span class="token punctuation">.</span><span class="token function">getMessages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; { en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3', } }</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2 id="t"><a href="#t" aria-hidden="true" class="header-anchor">#</a> t</h2><p>Translate the locale message</p><h3 id="parameters-5"><a href="#parameters-5" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>key</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Label to translate</li><li><code>opts</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>?</strong> Options for the translation (optional, default <code>{}</code>)
<ul><li><code>opts.params</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>?</strong> Params for the translation</li><li><code>opts.debug</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>?</strong> Show warnings in case of missing resources</li></ul></li></ul><h3 id="examples-5"><a href="#examples-5" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code>obj<span class="token punctuation">.</span><span class="token function">setMessages</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
en<span class="token punctuation">:</span> <span class="token punctuation">{</span> msg<span class="token punctuation">:</span> <span class="token string">'Msg'</span><span class="token punctuation">,</span> msg2<span class="token punctuation">:</span> <span class="token string">'Msg {test}'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
it<span class="token punctuation">:</span> <span class="token punctuation">{</span> msg2<span class="token punctuation">:</span> <span class="token string">'Msg {test} it'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'msg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -&gt; outputs `Msg`</span>
obj<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'msg2'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> params<span class="token punctuation">:</span> <span class="token punctuation">{</span> test<span class="token punctuation">:</span> <span class="token string">'hello'</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">// use params</span>
<span class="token comment">// -&gt; outputs `Msg hello`</span>
obj<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'msg2'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> l<span class="token punctuation">:</span> <span class="token string">'it'</span><span class="token punctuation">,</span> params<span class="token punctuation">:</span> <span class="token punctuation">{</span> test<span class="token punctuation">:</span> <span class="token string">'hello'</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">// custom local</span>
<span class="token comment">// -&gt; outputs `Msg hello it`</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/i18n.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">11/6/2019, 10:01:26 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/canvas.html">
Canvas
</a> →
</span></p></div></div></div></div>
<script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/23.a2c9ec17.js" defer></script>
</body>
</html>

10
docs/api/index.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/13.a6cc3529.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/13.e52ea678.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container page__apis"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container page__apis"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,10 +27,10 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="active sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h1 id="api-reference"><a href="#api-reference" aria-hidden="true" class="header-anchor">#</a> API Reference</h1><p>Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also <a href="/docs/modules/Plugins.html">create a plugin</a> and make those extensions reusable and available to others.</p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/README.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/9/2018, 1:03:59 AM</span></div></div><div class="page-nav"><p class="inner"><!----><span class="next"><a href="/docs/api/editor.html"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="active sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h1 id="api-reference"><a href="#api-reference" aria-hidden="true" class="header-anchor">#</a> API Reference</h1><p>Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also <a href="/docs/modules/Plugins.html">create a plugin</a> and make those extensions reusable and available to others.</p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/README.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">7/9/2018, 1:03:59 AM</span></div></div><div class="page-nav"><p class="inner"><!----><span class="next"><a href="/docs/api/editor.html">
Editor Editor
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/13.a6cc3529.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/13.e52ea678.js" defer></script>
</body> </body>
</html> </html>

10
docs/api/keymaps.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/23.5def0ed7.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/24.f9675b16.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="active sidebar-link">Keymaps</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#keymaps" class="sidebar-link">Keymaps</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#removeall" class="sidebar-link">removeAll</a></li></ul></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="keymaps"><a href="#keymaps" aria-hidden="true" class="header-anchor">#</a> Keymaps</h2><p>You can customize the initial state of the module from the editor initialization</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="active sidebar-link">Keymaps</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#keymaps" class="sidebar-link">Keymaps</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/keymaps.html#removeall" class="sidebar-link">removeAll</a></li></ul></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="keymaps"><a href="#keymaps" aria-hidden="true" class="header-anchor">#</a> Keymaps</h2><p>You can customize the initial state of the module from the editor initialization</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
keymaps<span class="token punctuation">:</span> <span class="token punctuation">{</span> keymaps<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// Object of keymaps</span> <span class="token comment">// Object of keymaps</span>
defaults<span class="token punctuation">:</span> <span class="token punctuation">{</span> defaults<span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -65,6 +65,6 @@ or just a command id as a string</p><h2 id="get"><a href="#get" aria-hidden="tru
Undo Manager Undo Manager
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/23.5def0ed7.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/24.f9675b16.js" defer></script>
</body> </body>
</html> </html>

10
docs/api/modal_dialog.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/24.52f57484.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/25.b52924ae.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="active sidebar-link">Modal</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#modal" class="sidebar-link">Modal</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#open" class="sidebar-link">open</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#close" class="sidebar-link">close</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#onceclose" class="sidebar-link">onceClose</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#onceopen" class="sidebar-link">onceOpen</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#isopen" class="sidebar-link">isOpen</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#settitle" class="sidebar-link">setTitle</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#gettitle" class="sidebar-link">getTitle</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#setcontent" class="sidebar-link">setContent</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#getcontent" class="sidebar-link">getContent</a></li></ul></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="modal"><a href="#modal" aria-hidden="true" class="header-anchor">#</a> Modal</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/modal_dialog/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="active sidebar-link">Modal</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#modal" class="sidebar-link">Modal</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#open" class="sidebar-link">open</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#close" class="sidebar-link">close</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#onceclose" class="sidebar-link">onceClose</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#onceopen" class="sidebar-link">onceOpen</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#isopen" class="sidebar-link">isOpen</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#settitle" class="sidebar-link">setTitle</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#gettitle" class="sidebar-link">getTitle</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#setcontent" class="sidebar-link">setContent</a></li><li class="sidebar-sub-header"><a href="/docs/api/modal_dialog.html#getcontent" class="sidebar-link">getContent</a></li></ul></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="modal"><a href="#modal" aria-hidden="true" class="header-anchor">#</a> Modal</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/modal_dialog/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
modal<span class="token punctuation">:</span> <span class="token punctuation">{</span> modal<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span> <span class="token comment">// options</span>
<span class="token punctuation">}</span> <span class="token punctuation">}</span>
@ -45,6 +45,6 @@ The callback will be called one only time</p><h3 id="parameters-3"><a href="#par
Rich Text Editor Rich Text Editor
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/24.52f57484.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/25.b52924ae.js" defer></script>
</body> </body>
</html> </html>

10
docs/api/panels.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/25.580a0d3a.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/26.81c00685.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="active sidebar-link">Panels</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/panels.html#panels" class="sidebar-link">Panels</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getpanels" class="sidebar-link">getPanels</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getpanelsel" class="sidebar-link">getPanelsEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#addpanel" class="sidebar-link">addPanel</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#removepanel" class="sidebar-link">removePanel</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getpanel" class="sidebar-link">getPanel</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#addbutton" class="sidebar-link">addButton</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#removebutton" class="sidebar-link">removeButton</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getbutton" class="sidebar-link">getButton</a></li></ul></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="panels"><a href="#panels" aria-hidden="true" class="header-anchor">#</a> Panels</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="active sidebar-link">Panels</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/panels.html#panels" class="sidebar-link">Panels</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getpanels" class="sidebar-link">getPanels</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getpanelsel" class="sidebar-link">getPanelsEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#addpanel" class="sidebar-link">addPanel</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#removepanel" class="sidebar-link">removePanel</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getpanel" class="sidebar-link">getPanel</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#addbutton" class="sidebar-link">addButton</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#removebutton" class="sidebar-link">removeButton</a></li><li class="sidebar-sub-header"><a href="/docs/api/panels.html#getbutton" class="sidebar-link">getButton</a></li></ul></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="panels"><a href="#panels" aria-hidden="true" class="header-anchor">#</a> Panels</h2><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
panels<span class="token punctuation">:</span> <span class="token punctuation">{</span> panels<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span> <span class="token comment">// options</span>
<span class="token punctuation">}</span> <span class="token punctuation">}</span>
@ -86,6 +86,6 @@ command<span class="token punctuation">:</span> <span class="token punctuation">
Style Manager Style Manager
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/25.580a0d3a.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/26.81c00685.js" defer></script>
</body> </body>
</html> </html>

12
docs/api/rich_text_editor.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/26.bcb8e8b7.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/27.7372785c.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="active sidebar-link">Rich Text Editor</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#richtexteditor" class="sidebar-link">RichTextEditor</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#gettoolbarel" class="sidebar-link">getToolbarEl</a></li></ul></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="richtexteditor"><a href="#richtexteditor" aria-hidden="true" class="header-anchor">#</a> RichTextEditor</h2><p>This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand" target="_blank" rel="noopener noreferrer">HTML Editing APIs<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>. <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="active sidebar-link">Rich Text Editor</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#richtexteditor" class="sidebar-link">RichTextEditor</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/rich_text_editor.html#gettoolbarel" class="sidebar-link">getToolbarEl</a></li></ul></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="richtexteditor"><a href="#richtexteditor" aria-hidden="true" class="header-anchor">#</a> RichTextEditor</h2><p>This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand" target="_blank" rel="noopener noreferrer">HTML Editing APIs<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.
It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
richTextEditor<span class="token punctuation">:</span> <span class="token punctuation">{</span> richTextEditor<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span> <span class="token comment">// options</span>
@ -67,13 +67,13 @@ rte<span class="token punctuation">.</span><span class="token function">add</spa
<span class="token comment">// {name: 'bold', ...}</span> <span class="token comment">// {name: 'bold', ...}</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2 id="getall"><a href="#getall" aria-hidden="true" class="header-anchor">#</a> getAll</h2><p>Get all actions</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2 id="remove"><a href="#remove" aria-hidden="true" class="header-anchor">#</a> remove</h2><p>Remove the action from the toolbar</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></li></ul><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> action <span class="token operator">=</span> rte<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'bold'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2 id="getall"><a href="#getall" aria-hidden="true" class="header-anchor">#</a> getAll</h2><p>Get all actions</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2 id="remove"><a href="#remove" aria-hidden="true" class="header-anchor">#</a> remove</h2><p>Remove the action from the toolbar</p><h3 id="parameters-3"><a href="#parameters-3" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></li></ul><h3 id="examples-3"><a href="#examples-3" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> action <span class="token operator">=</span> rte<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'bold'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// {name: 'bold', ...}</span> <span class="token comment">// {name: 'bold', ...}</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Removed action</p><h2 id="gettoolbarel"><a href="#gettoolbarel" aria-hidden="true" class="header-anchor">#</a> getToolbarEl</h2><p>Get the toolbar element</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/rich_text_editor.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/13/2019, 6:32:25 PM</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> Removed action</p><h2 id="gettoolbarel"><a href="#gettoolbarel" aria-hidden="true" class="header-anchor">#</a> getToolbarEl</h2><p>Get the toolbar element</p><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/rich_text_editor.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">9/18/2019, 7:55:02 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/api/modal_dialog.html" class="prev"> ← <a href="/docs/api/modal_dialog.html" class="prev">
Modal Modal
</a></span><span class="next"><a href="/docs/api/keymaps.html"> </a></span><span class="next"><a href="/docs/api/keymaps.html">
Keymaps Keymaps
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/26.bcb8e8b7.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/27.7372785c.js" defer></script>
</body> </body>
</html> </html>

10
docs/api/selector_manager.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/27.c42a2870.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/28.df5c22ed.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="active sidebar-link">Selector Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#selectormanager" class="sidebar-link">SelectorManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#addclass" class="sidebar-link">addClass</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#escapename" class="sidebar-link">escapeName</a></li></ul></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="selectormanager"><a href="#selectormanager" aria-hidden="true" class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="active sidebar-link">Selector Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#selectormanager" class="sidebar-link">SelectorManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#addclass" class="sidebar-link">addClass</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#get" class="sidebar-link">get</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#getall" class="sidebar-link">getAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/selector_manager.html#escapename" class="sidebar-link">escapeName</a></li></ul></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul></div><div class="page"><div class="content"><h2 id="selectormanager"><a href="#selectormanager" aria-hidden="true" class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
a look at this code:</p><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">span &gt; #send-btn.btn</span><span class="token punctuation">{</span> a look at this code:</p><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">span &gt; #send-btn.btn</span><span class="token punctuation">{</span>
... ...
<span class="token punctuation">}</span> <span class="token punctuation">}</span>
@ -63,6 +63,6 @@ sm<span class="token punctuation">.</span><span class="token function">addClass<
CSS Composer CSS Composer
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/27.c42a2870.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/28.df5c22ed.js" defer></script>
</body> </body>
</html> </html>

10
docs/api/storage_manager.html
View File

File diff suppressed because one or more lines are too long

12
docs/api/style_manager.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/29.9ddb75b7.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/30.5f8f38a5.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/30.d165faf7.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="active sidebar-link">Style Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#stylemanager" class="sidebar-link">StyleManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#addsector" class="sidebar-link">addSector</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getsector" class="sidebar-link">getSector</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#removesector" class="sidebar-link">removeSector</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getsectors" class="sidebar-link">getSectors</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#addproperty" class="sidebar-link">addProperty</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getproperty" class="sidebar-link">getProperty</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#removeproperty" class="sidebar-link">removeProperty</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getproperties" class="sidebar-link">getProperties</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getmodeltostyle" class="sidebar-link">getModelToStyle</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#addtype" class="sidebar-link">addType</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#gettype" class="sidebar-link">getType</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#gettypes" class="sidebar-link">getTypes</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#createtype" class="sidebar-link">createType</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#settarget" class="sidebar-link">setTarget</a></li></ul></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="stylemanager"><a href="#stylemanager" aria-hidden="true" class="header-anchor">#</a> StyleManager</h2><p>With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components. <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="active sidebar-link">Style Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#stylemanager" class="sidebar-link">StyleManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#addsector" class="sidebar-link">addSector</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getsector" class="sidebar-link">getSector</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#removesector" class="sidebar-link">removeSector</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getsectors" class="sidebar-link">getSectors</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#addproperty" class="sidebar-link">addProperty</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getproperty" class="sidebar-link">getProperty</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#removeproperty" class="sidebar-link">removeProperty</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getproperties" class="sidebar-link">getProperties</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getmodeltostyle" class="sidebar-link">getModelToStyle</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#addtype" class="sidebar-link">addType</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#gettype" class="sidebar-link">getType</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#gettypes" class="sidebar-link">getTypes</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#createtype" class="sidebar-link">createType</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#settarget" class="sidebar-link">setTarget</a></li></ul></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="stylemanager"><a href="#stylemanager" aria-hidden="true" class="header-anchor">#</a> StyleManager</h2><p>With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
styleManager<span class="token punctuation">:</span> <span class="token punctuation">{</span> styleManager<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span> <span class="token comment">// options</span>
@ -85,13 +85,13 @@ propView<span class="token punctuation">.</span><span class="token function">ren
propView<span class="token punctuation">.</span>model<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'change:value'</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span> propView<span class="token punctuation">.</span>model<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'change:value'</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
someContainer<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>propView<span class="token punctuation">.</span>el<span class="token punctuation">)</span><span class="token punctuation">;</span> someContainer<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>propView<span class="token punctuation">.</span>el<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>PropertyView</strong></p><h2 id="settarget"><a href="#settarget" aria-hidden="true" class="header-anchor">#</a> setTarget</h2><p>Select different target for the Style Manager. </code></pre></div><p>Returns <strong>PropertyView</strong></p><h2 id="settarget"><a href="#settarget" aria-hidden="true" class="header-anchor">#</a> setTarget</h2><p>Select different target for the Style Manager.
It could be a Component, CSSRule, or a string of any CSS selector</p><h3 id="parameters-12"><a href="#parameters-12" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>target</code><strong>(Component | CSSRule | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</strong></li><li><code>opts</code></li></ul><p>Returns <strong>Styleable</strong> A Component or CSSRule</p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/style_manager.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">8/13/2019, 6:32:25 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev"> It could be a Component, CSSRule, or a string of any CSS selector</p><h3 id="parameters-12"><a href="#parameters-12" aria-hidden="true" class="header-anchor">#</a> Parameters</h3><ul><li><code>target</code><strong>(Component | CSSRule | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</strong></li><li><code>opts</code></li></ul><p>Returns <strong>Styleable</strong> A Component or CSSRule</p></div><div class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/style_manager.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">9/18/2019, 7:55:02 AM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
← <a href="/docs/api/panels.html" class="prev"> ← <a href="/docs/api/panels.html" class="prev">
Panels Panels
</a></span><span class="next"><a href="/docs/api/storage_manager.html"> </a></span><span class="next"><a href="/docs/api/storage_manager.html">
Storage Manager Storage Manager
</a> → </a> →
</span></p></div></div></div></div> </span></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/29.9ddb75b7.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/30.d165faf7.js" defer></script>
</body> </body>
</html> </html>

10
docs/api/undo_manager.html
View File

@ -8,9 +8,9 @@
<link rel="icon" href="/docs/logo-icon.png"> <link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9"> <link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.15.9">
<script src="../js/grapes.min.js?v0.15.9"></script> <script src="../js/grapes.min.js?v0.15.9"></script>
<link rel="preload" href="/docs/assets/css/styles.c2e3b7b9.css" as="style"><link rel="preload" href="/docs/assets/js/app.c2e3b7b9.js" as="script"><link rel="preload" href="/docs/assets/js/30.5f8f38a5.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.a2a25050.css"><link rel="prefetch" href="/docs/assets/css/2.styles.8c740de0.css"><link rel="prefetch" href="/docs/assets/css/3.styles.8f46678f.css"><link rel="prefetch" href="/docs/assets/css/4.styles.d7c8d8c8.css"><link rel="prefetch" href="/docs/assets/css/5.styles.559393ac.css"><link rel="prefetch" href="/docs/assets/css/6.styles.34cbb301.css"><link rel="prefetch" href="/docs/assets/css/7.styles.c0791696.css"><link rel="prefetch" href="/docs/assets/css/8.styles.74d58e85.css"><link rel="prefetch" href="/docs/assets/css/9.styles.0598067b.css"><link rel="prefetch" href="/docs/assets/js/1.a2a25050.js"><link rel="prefetch" href="/docs/assets/js/10.9ede7f04.js"><link rel="prefetch" href="/docs/assets/js/11.ff965783.js"><link rel="prefetch" href="/docs/assets/js/12.59f9070c.js"><link rel="prefetch" href="/docs/assets/js/13.a6cc3529.js"><link rel="prefetch" href="/docs/assets/js/14.6e7b3ed3.js"><link rel="prefetch" href="/docs/assets/js/15.1abf69e4.js"><link rel="prefetch" href="/docs/assets/js/16.ec6c5cc6.js"><link rel="prefetch" href="/docs/assets/js/17.46fbba7f.js"><link rel="prefetch" href="/docs/assets/js/18.d5061fc6.js"><link rel="prefetch" href="/docs/assets/js/19.a7157a72.js"><link rel="prefetch" href="/docs/assets/js/2.8c740de0.js"><link rel="prefetch" href="/docs/assets/js/20.21e836be.js"><link rel="prefetch" href="/docs/assets/js/21.06e8e22c.js"><link rel="prefetch" href="/docs/assets/js/22.fdc81ae8.js"><link rel="prefetch" href="/docs/assets/js/23.5def0ed7.js"><link rel="prefetch" href="/docs/assets/js/24.52f57484.js"><link rel="prefetch" href="/docs/assets/js/25.580a0d3a.js"><link rel="prefetch" href="/docs/assets/js/26.bcb8e8b7.js"><link rel="prefetch" href="/docs/assets/js/27.c42a2870.js"><link rel="prefetch" href="/docs/assets/js/28.105f50dc.js"><link rel="prefetch" href="/docs/assets/js/29.9ddb75b7.js"><link rel="prefetch" href="/docs/assets/js/3.8f46678f.js"><link rel="prefetch" href="/docs/assets/js/31.7aba5f0a.js"><link rel="prefetch" href="/docs/assets/js/32.a148215c.js"><link rel="prefetch" href="/docs/assets/js/33.279ef67b.js"><link rel="prefetch" href="/docs/assets/js/34.0f0c2c01.js"><link rel="prefetch" href="/docs/assets/js/35.31f9e9a0.js"><link rel="prefetch" href="/docs/assets/js/36.0db25c94.js"><link rel="prefetch" href="/docs/assets/js/37.39e59aed.js"><link rel="prefetch" href="/docs/assets/js/38.c84dae85.js"><link rel="prefetch" href="/docs/assets/js/39.71065cf1.js"><link rel="prefetch" href="/docs/assets/js/4.d7c8d8c8.js"><link rel="prefetch" href="/docs/assets/js/40.c7fc6d82.js"><link rel="prefetch" href="/docs/assets/js/41.b60d8fe8.js"><link rel="prefetch" href="/docs/assets/js/42.c8dfa24b.js"><link rel="prefetch" href="/docs/assets/js/43.fda6a65b.js"><link rel="prefetch" href="/docs/assets/js/44.fb6f607c.js"><link rel="prefetch" href="/docs/assets/js/5.559393ac.js"><link rel="prefetch" href="/docs/assets/js/6.34cbb301.js"><link rel="prefetch" href="/docs/assets/js/7.c0791696.js"><link rel="prefetch" href="/docs/assets/js/8.74d58e85.js"><link rel="prefetch" href="/docs/assets/js/9.0598067b.js"> <link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/31.334d7953.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/36.67cb8d1f.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
<link rel="stylesheet" href="/docs/assets/css/styles.c2e3b7b9.css"> <link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.css">
</head> </head>
<body> <body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide"> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" class="logo"><span class="site-name can-hide">
@ -27,7 +27,7 @@
Twitter 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"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.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 GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="active sidebar-link">Undo Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#undomanager" class="sidebar-link">UndoManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#removeall" class="sidebar-link">removeAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#start" class="sidebar-link">start</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#stop" class="sidebar-link">stop</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#undo" class="sidebar-link">undo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#undoall" class="sidebar-link">undoAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#redo" class="sidebar-link">redo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#redoall" class="sidebar-link">redoAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#hasundo" class="sidebar-link">hasUndo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#hasredo" class="sidebar-link">hasRedo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#getstack" class="sidebar-link">getStack</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#clear" class="sidebar-link">clear</a></li></ul></li></ul></div><div class="page"><div class="content"><h2 id="undomanager"><a href="#undomanager" aria-hidden="true" class="header-anchor">#</a> UndoManager</h2><p>This module allows to manage the stack of changes applied in canvas. <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/api/" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="active sidebar-link">Undo Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#undomanager" class="sidebar-link">UndoManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#add" class="sidebar-link">add</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#removeall" class="sidebar-link">removeAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#start" class="sidebar-link">start</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#stop" class="sidebar-link">stop</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#undo" class="sidebar-link">undo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#undoall" class="sidebar-link">undoAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#redo" class="sidebar-link">redo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#redoall" class="sidebar-link">redoAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#hasundo" class="sidebar-link">hasUndo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#hasredo" class="sidebar-link">hasRedo</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#getstack" class="sidebar-link">getStack</a></li><li class="sidebar-sub-header"><a href="/docs/api/undo_manager.html#clear" class="sidebar-link">clear</a></li></ul></li></ul></div><div class="page"><div class="content"><h2 id="undomanager"><a href="#undomanager" aria-hidden="true" class="header-anchor">#</a> UndoManager</h2><p>This module allows to manage the stack of changes applied in canvas.
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> um <span class="token operator">=</span> editor<span class="token punctuation">.</span>UndoManager<span class="token punctuation">;</span> Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> um <span class="token operator">=</span> editor<span class="token punctuation">.</span>UndoManager<span class="token punctuation">;</span>
</code></pre></div><ul><li><a href="#getconfig">getConfig</a></li><li><a href="#add">add</a></li><li><a href="#remove">remove</a></li><li><a href="#removeall">removeAll</a></li><li><a href="#start">start</a></li><li><a href="#stop">stop</a></li><li><a href="#undo">undo</a></li><li><a href="#undoall">undoAll</a></li><li><a href="#redo">redo</a></li><li><a href="#redoall">redoAll</a></li><li><a href="#hasundo">hasUndo</a></li><li><a href="#hasredo">hasRedo</a></li><li><a href="#getstack">getStack</a></li><li><a href="#clear">clear</a></li></ul><h2 id="getconfig"><a href="#getconfig" aria-hidden="true" class="header-anchor">#</a> getConfig</h2><p>Get module configurations</p><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> config <span class="token operator">=</span> um<span class="token punctuation">.</span><span class="token function">getConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><ul><li><a href="#getconfig">getConfig</a></li><li><a href="#add">add</a></li><li><a href="#remove">remove</a></li><li><a href="#removeall">removeAll</a></li><li><a href="#start">start</a></li><li><a href="#stop">stop</a></li><li><a href="#undo">undo</a></li><li><a href="#undoall">undoAll</a></li><li><a href="#redo">redo</a></li><li><a href="#redoall">redoAll</a></li><li><a href="#hasundo">hasUndo</a></li><li><a href="#hasredo">hasRedo</a></li><li><a href="#getstack">getStack</a></li><li><a href="#clear">clear</a></li></ul><h2 id="getconfig"><a href="#getconfig" aria-hidden="true" class="header-anchor">#</a> getConfig</h2><p>Get module configurations</p><h3 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h3><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> config <span class="token operator">=</span> um<span class="token punctuation">.</span><span class="token function">getConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// { ... }</span> <span class="token comment">// { ... }</span>
@ -50,6 +50,6 @@ stack<span class="token punctuation">.</span><span class="token function">each</
← <a href="/docs/api/keymaps.html" class="prev"> ← <a href="/docs/api/keymaps.html" class="prev">
Keymaps Keymaps
</a></span><!----></p></div></div></div></div> </a></span><!----></p></div></div></div></div>
<script src="/docs/assets/js/app.c2e3b7b9.js" defer></script><script src="/docs/assets/js/30.5f8f38a5.js" defer></script> <script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/31.334d7953.js" defer></script>
</body> </body>
</html> </html>

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 39 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/assets-uploader.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 18 KiB

0
docs/assets/css/1.styles.a2a25050.css → docs/assets/css/1.styles.b40e6662.css
View File

0
docs/assets/css/2.styles.8c740de0.css → docs/assets/css/2.styles.896e948d.css
View File

0
docs/assets/css/3.styles.8f46678f.css → docs/assets/css/3.styles.46968bd4.css
View File

0
docs/assets/css/4.styles.d7c8d8c8.css → docs/assets/css/4.styles.79691bb5.css
View File

0
docs/assets/css/5.styles.559393ac.css → docs/assets/css/5.styles.6013373a.css
View File

0
docs/assets/css/6.styles.34cbb301.css → docs/assets/css/6.styles.467c19a2.css
View File

0
docs/assets/css/7.styles.c0791696.css → docs/assets/css/7.styles.ce9d181d.css
View File

0
docs/assets/css/8.styles.74d58e85.css → docs/assets/css/8.styles.aae17ac6.css
View File

0
docs/assets/css/9.styles.0598067b.css → docs/assets/css/9.styles.e0170b17.css
View File

0
docs/assets/css/styles.c2e3b7b9.css → docs/assets/css/styles.e1f2d947.css
View File

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

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 176 B

After

Width:  |  Height:  |  Size: 216 B

2
docs/assets/js/1.a2a25050.js → docs/assets/js/1.b40e6662.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/10.9ede7f04.js → docs/assets/js/10.e7cd7c26.js
View File

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{208:function(e,t,r){"use strict";r.r(t);var s={name:"DemoViewer",props:{value:{type:String,default:""},user:{type:String,default:"artur_arseniev"},width:{type:String,default:"100%"},height:{type:String,default:"300"}},computed:{src:function(){var e=this.value,t=this.user;return"//jsfiddle.net/".concat(t,"/").concat(e,"/embedded/js,html,css,result")}}},i=r(1),n=Object(i.a)(s,(function(){var e=this.$createElement;return(this._self._c||e)("iframe",{attrs:{width:this.width,height:this.height,src:this.src,allowfullscreen:"allowfullscreen",frameborder:"0"}})}),[],!1,null,null,null);t.default=n.exports}}]); (window.webpackJsonp=window.webpackJsonp||[]).push([[10],{209:function(e,t,r){"use strict";r.r(t);var s={name:"DemoViewer",props:{value:{type:String,default:""},user:{type:String,default:"artur_arseniev"},width:{type:String,default:"100%"},height:{type:String,default:"300"}},computed:{src:function(){var e=this.value,t=this.user;return"//jsfiddle.net/".concat(t,"/").concat(e,"/embedded/js,html,css,result")}}},i=r(1),n=Object(i.a)(s,(function(){var e=this.$createElement;return(this._self._c||e)("iframe",{attrs:{width:this.width,height:this.height,src:this.src,allowfullscreen:"allowfullscreen",frameborder:"0"}})}),[],!1,null,null,null);t.default=n.exports}}]);

2
docs/assets/js/11.ff965783.js → docs/assets/js/11.3f87b9b8.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/12.59f9070c.js → docs/assets/js/12.269b5586.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/13.a6cc3529.js → docs/assets/js/13.e52ea678.js
View File

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{231:function(e,t,a){"use strict";a.r(t);var n=a(1),s=Object(n.a)({},(function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"content"},[this._m(0),t("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),t("router-link",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"api-reference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api-reference","aria-hidden":"true"}},[this._v("#")]),this._v(" API Reference")])}],!1,null,null,null);t.default=s.exports}}]); (window.webpackJsonp=window.webpackJsonp||[]).push([[13],{233:function(e,t,a){"use strict";a.r(t);var n=a(1),s=Object(n.a)({},(function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"content"},[this._m(0),t("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),t("router-link",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"api-reference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api-reference","aria-hidden":"true"}},[this._v("#")]),this._v(" API Reference")])}],!1,null,null,null);t.default=s.exports}}]);

2
docs/assets/js/14.6e7b3ed3.js → docs/assets/js/14.0606827a.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/15.1abf69e4.js → docs/assets/js/15.aa7f42f8.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/16.ec6c5cc6.js → docs/assets/js/16.959c0bd7.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/17.46fbba7f.js → docs/assets/js/17.bfba947e.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/18.d5061fc6.js → docs/assets/js/18.7f401ffb.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/19.a7157a72.js → docs/assets/js/19.3e0ce3c8.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/2.8c740de0.js → docs/assets/js/2.896e948d.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/20.21e836be.js → docs/assets/js/20.f4502040.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/21.06e8e22c.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/21.2babea6a.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/22.26e5d9ed.js
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

1
docs/assets/js/23.a2c9ec17.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/23.5def0ed7.js → docs/assets/js/24.f9675b16.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/24.52f57484.js → docs/assets/js/25.b52924ae.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/25.580a0d3a.js → docs/assets/js/26.81c00685.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/26.bcb8e8b7.js → docs/assets/js/27.7372785c.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/27.c42a2870.js → docs/assets/js/28.df5c22ed.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/28.105f50dc.js → docs/assets/js/29.b167a894.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/3.8f46678f.js → docs/assets/js/3.46968bd4.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/29.9ddb75b7.js → docs/assets/js/30.d165faf7.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/30.5f8f38a5.js → docs/assets/js/31.334d7953.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/31.7aba5f0a.js → docs/assets/js/32.f9daa2c8.js
View File

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

2
docs/assets/js/32.a148215c.js → docs/assets/js/33.93f49bfa.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/33.279ef67b.js → docs/assets/js/34.4865e6c3.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/34.0f0c2c01.js → docs/assets/js/35.9d089775.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/35.31f9e9a0.js → docs/assets/js/36.67cb8d1f.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/36.0db25c94.js → docs/assets/js/37.708a94ac.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/37.39e59aed.js → docs/assets/js/38.0f8df29b.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/38.c84dae85.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/39.71065cf1.js → docs/assets/js/39.074f3faf.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/4.d7c8d8c8.js → docs/assets/js/4.79691bb5.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/40.c7fc6d82.js → docs/assets/js/40.cef45f06.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/41.b60d8fe8.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/41.c734b929.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/42.1078a060.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/42.c8dfa24b.js → docs/assets/js/43.7188da01.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/43.fda6a65b.js → docs/assets/js/44.1fd52e91.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/44.fb6f607c.js → docs/assets/js/45.69c67864.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/5.559393ac.js → docs/assets/js/5.6013373a.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/6.34cbb301.js → docs/assets/js/6.467c19a2.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/7.c0791696.js → docs/assets/js/7.ce9d181d.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/8.74d58e85.js → docs/assets/js/8.aae17ac6.js
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/9.0598067b.js → docs/assets/js/9.e0170b17.js
View File

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

6
docs/assets/js/app.c2e3b7b9.js → docs/assets/js/app.e1f2d947.js
View File

File diff suppressed because one or more lines are too long

BIN
docs/block-custom-render.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
docs/block-custom-render2.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
docs/blocks3.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 35 KiB

BIN
docs/btn-clicked.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 174 KiB

BIN
docs/canvas-panels.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 93 KiB

69
docs/component-type-stack.svg
View File

@ -1 +1,68 @@
<svg height="324" viewBox="0 0 572 324" width="572" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(222 89)"><rect fill="#e67891" height="47" rx="4" width="124"/><text fill="#fff" font-family="Avenir-Book, Avenir" font-size="15"><tspan x="22.1375" y="15">type: image</tspan></text></g><g transform="matrix(.97437006 .22495105 -.22495105 .97437006 49.875406 112.655338)"><rect fill="#e67891" height="47" rx="4" width="124"/><text fill="#fff" font-family="Avenir-Book, Avenir" font-size="15"><tspan x="11.8625" y="15">type: new-type</tspan></text></g><g transform="translate(222 156)"><rect fill="#e67891" height="47" rx="4" width="124"/><text fill="#fff" font-family="Avenir-Book, Avenir" font-size="15"><tspan x="30.2075" y="15">type: text</tspan></text></g><g transform="translate(222 221)"><rect fill="#e67891" height="47" rx="4" width="124"/><text fill="#fff" font-family="Avenir-Book, Avenir" font-size="15"><tspan x="19.6475" y="15">type: default</tspan></text></g><text fill="#6e6e6e" font-family="Helvetica-Bold, Helvetica" font-size="15" font-weight="bold"><tspan x="201" y="41">Component Type Stack</tspan></text><path d="m94 113c.4283817-24 32.095048-36 95-36" stroke="#999"/><path d="m203 77.5-14 5.5v-11z" fill="#999"/><path d="m382 283.5-14 5.5v-11z" fill="#999" transform="matrix(0 1 -1 0 658.5 -91.5)"/><g fill="#6e6e6e"><text font-family="Helvetica" font-size="12"><tspan x="33.804688" y="214">New Component Type </tspan><tspan x="62.140625" y="228">goes on top</tspan></text><text font-family="Helvetica" font-size="12"><tspan x="396" y="231">The </tspan><tspan font-family="Helvetica-Bold, Helvetica" font-weight="bold" x="420.011719" y="231">default </tspan><tspan x="462.679688" y="231">is the last </tspan><tspan x="396" y="245">available type</tspan></text><text font-family="Helvetica" font-size="12"><tspan x="396" y="141">Each parsed element goes </tspan><tspan x="396" y="155">through the stack from TOP </tspan><tspan x="396" y="169">to BOTTOM</tspan></text></g><path d="m375.5 78.5v202.121251" stroke="#999" stroke-linecap="square"/><text font-family="Helvetica" font-size="12"><tspan fill="#e67891" x="396" y="86">&lt;span&gt;</tspan> <tspan fill="#6e6e6e" x="436.037109" y="86">New element</tspan> <tspan fill="#e67891" x="506.068359" y="86">&lt;/span&gt;</tspan></text></g></svg> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="572px" height="324px" viewBox="0 0 572 324" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
<title>Artboard</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(222.000000, 89.000000)">
<g>
<rect fill="#E67891" x="0" y="0" width="124" height="47" rx="4"></rect>
<text font-family="Avenir-Book, Avenir" font-size="15" font-weight="normal" fill="#FFFFFF">
<tspan x="22.1375" y="15">type: image</tspan>
</text>
</g>
</g>
<g transform="translate(105.000000, 149.500000) rotate(13.000000) translate(-105.000000, -149.500000) translate(43.000000, 126.000000)">
<g>
<rect fill="#E67891" x="0" y="0" width="124" height="47" rx="4"></rect>
<text font-family="Avenir-Book, Avenir" font-size="15" font-weight="normal" fill="#FFFFFF">
<tspan x="11.8625" y="15">type: new-type</tspan>
</text>
</g>
</g>
<g transform="translate(222.000000, 156.000000)">
<g>
<rect fill="#E67891" x="0" y="0" width="124" height="47" rx="4"></rect>
<text font-family="Avenir-Book, Avenir" font-size="15" font-weight="normal" fill="#FFFFFF">
<tspan x="30.2075" y="15">type: text</tspan>
</text>
</g>
</g>
<g transform="translate(222.000000, 221.000000)">
<g>
<rect fill="#E67891" x="0" y="0" width="124" height="47" rx="4"></rect>
<text font-family="Avenir-Book, Avenir" font-size="15" font-weight="normal" fill="#FFFFFF">
<tspan x="19.6475" y="15">type: default</tspan>
</text>
</g>
</g>
<text font-family="Helvetica-Bold, Helvetica" font-size="15" font-weight="bold" fill="#6E6E6E">
<tspan x="201" y="41">Component Type Stack</tspan>
</text>
<path d="M94,113 C94.4283817,89 126.095048,77 189,77" stroke="#999999"></path>
<polygon fill="#999999" points="203 77.5 189 83 189 72"></polygon>
<polygon fill="#999999" transform="translate(375.000000, 283.500000) rotate(-270.000000) translate(-375.000000, -283.500000) " points="382 283.5 368 289 368 278"></polygon>
<text font-family="Helvetica" font-size="12" font-weight="normal" fill="#6E6E6E">
<tspan x="33.8046875" y="214">New Component Type </tspan>
<tspan x="62.140625" y="228">goes on top</tspan>
</text>
<text font-family="Helvetica" font-size="12" font-weight="normal" fill="#6E6E6E">
<tspan x="396" y="231">The </tspan>
<tspan x="420.011719" y="231" font-family="Helvetica-Bold, Helvetica" font-weight="bold">default </tspan>
<tspan x="462.679688" y="231">is the last </tspan>
<tspan x="396" y="245">available type</tspan>
</text>
<text font-family="Helvetica" font-size="12" font-weight="normal" fill="#6E6E6E">
<tspan x="396" y="141">Each parsed element goes </tspan>
<tspan x="396" y="155">through the stack from TOP </tspan>
<tspan x="396" y="169">to BOTTOM</tspan>
</text>
<path d="M375.5,78.5 L375.5,280.621251" stroke="#999999" stroke-linecap="square"></path>
<text font-family="Helvetica" font-size="12" font-weight="normal">
<tspan x="396" y="86" fill="#E67891">&lt;span&gt;</tspan>
<tspan x="436.037109" y="86" fill="#6E6E6E">New element</tspan>
<tspan x="506.068359" y="86" fill="#E67891">&lt;/span&gt;</tspan>
</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
docs/cssom-devtools.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 49 KiB

BIN
docs/cssom-result.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 205 KiB

BIN
docs/default-gjs.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
docs/default-link-comp.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
docs/default-sm.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
docs/default-traits.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
docs/demo-view.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 69 KiB

BIN
docs/docs-init-link-trait.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

Some files were not shown because too many files changed in this diff

Write Preview
Loading…
Cancel
Save