Update builder.html

builder.html

@@ -83,72 +83,79 @@
         }
       </style>
     </div>
+<script src="https://unpkg.com/grapesjs-custom-code/dist/grapesjs-custom-code.min.js"></script>
 
-    <script type="text/javascript">
-      var editor = grapesjs.init({
-        showOffsets: 1,
-        noticeOnUnload: 0,
-        container: '#gjs',
-        height: '100%',
-        fromElement: true,
-        storageManager: { autoload: 0 },
-        styleManager : {
-          sectors: [{
-              name: 'General',
-              open: false,
-              buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
-            },{
-              name: 'Flex',
-              open: false,
-              buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self']
-            },{
-              name: 'Dimension',
-              open: false,
-              buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
-            },{
-              name: 'Typography',
-              open: false,
-              buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
-            },{
-              name: 'Decorations',
-              open: false,
-              buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
-            },{
-              name: 'Extra',
-              open: false,
-              buildProps: ['transition', 'perspective', 'transform'],
-            }
-          ],
-        },
-      });
+<script type="text/javascript">
+  var editor = grapesjs.init({
+    showOffsets: 1,
+    noticeOnUnload: 0,
+    container: '#gjs',
+    height: '100%',
+    fromElement: true,
+    storageManager: { autoload: 0 },
+    plugins: ['gjs-custom-code'],
+    pluginsOpts: {
+      'gjs-custom-code': {
+        // Опции плагина
+      }
+    },
+    styleManager : {
+      sectors: [{
+          name: 'General',
+          open: false,
+          buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
+        },{
+          name: 'Flex',
+          open: false,
+          buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self']
+        },{
+          name: 'Dimension',
+          open: false,
+          buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
+        },{
+          name: 'Typography',
+          open: false,
+          buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
+        },{
+          name: 'Decorations',
+          open: false,
+          buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
+        },{
+          name: 'Extra',
+          open: false,
+          buildProps: ['transition', 'perspective', 'transform'],
+        }
+      ],
+    },
+  });
 
-      // Add blocks for each element
-      editor.BlockManager.add('welcome-block', {
-        label: 'Welcome Title',
-        content: `<h1 class="welcome">Welcome to</h1>`
-      });
+  // Add blocks for each element
+  editor.BlockManager.add('welcome-block', {
+    label: 'Welcome Title',
+    content: `<h1 class="welcome">Welcome to</h1>`
+  });
 
-      editor.BlockManager.add('big-title-block', {
-        label: 'Big Title',
-        content: `
-          <div class="big-title">
-            <svg class="logo" viewBox="0 0 100 100">
-              <path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
-            </svg>
-            <span>GrapesJS</span>
-          </div>
-        `
-      });
+  editor.BlockManager.add('big-title-block', {
+    label: 'Big Title',
+    content: `
+      <div class="big-title">
+        <svg class="logo" viewBox="0 0 100 100">
+          <path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
+        </svg>
+        <span>GrapesJS</span>
+      </div>
+    `
+  });
 
-      editor.BlockManager.add('description-block', {
-        label: 'Description',
-        content: `<div class="description">This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.</div>`
-      });
+  editor.BlockManager.add('description-block', {
+    label: 'Description',
+    content: `<div class="description">This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.</div>`
+  });
 
-      editor.BlockManager.add('button-block', {
-        label: 'Add Button',
-        content: `<button class="add-button">Ещё добавь</button>`
-      });
-    </script>
+  editor.BlockManager.add('button-block', {
+    label: 'Add Button',
+    content: `<button class="add-button">Ещё добавь</button>`
+  });
+</script>
   </body>
 </html>