Update builder.html

builder.html

@@ -5,10 +5,9 @@
     <title>GrapesJS</title>
     <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
     <script src="https://unpkg.com/grapesjs"></script>
-
-<script src="https://unpkg.com/grapesjs-custom-code/dist/grapesjs-custom-code.min.js"></script>
-
-    
+    <script src="https://unpkg.com/grapesjs-custom-code/dist/grapesjs-custom-code.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <style>
       body,
       html {
@@ -32,7 +31,8 @@
           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>
-        <button class="add-button">Ещё добавь</button>
+        <button class="add-button" onclick="addCustomScript()">Добавить свой скрипт</button>
+        <button class="add-button" onclick="exportHtml()">Скачать HTML</button>
       </div>
       <style>
         .panel {
@@ -125,13 +125,11 @@
           ],
         },
       });
-
       // 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: `
@@ -143,33 +141,96 @@
           </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>
 
+    <script type="text/javascript">
+      var editor = grapesjs.init({
+          container : '#gjs',
+          ...
+          plugins: ['grapesjs-custom-code'],
+          pluginsOpts: {
+            'grapesjs-custom-code': {
+              // options
+            }
+          }
+      });
+    </script>
 
+    <script>
+      function addCustomScript() {
+        Swal.fire({
+          title: 'Добавить свой скрипт',
+          input: 'textarea',
+          inputPlaceholder: 'Введите ваш скрипт здесь...',
+          showCancelButton: true,
+          confirmButtonText: 'Добавить',
+          cancelButtonText: 'Отмена',
+          inputValidator: (value) => {
+            if (!value) {
+              return 'Вы должны ввести скрипт!'
+            }
+          }
+        }).then((result) => {
+          if (result.isConfirmed) {
+            const script = `<script>${result.value}<\/script>`;
+            const htmlCode = editor.getHtml();
+            const newHtml = htmlCode + script;
+            editor.setComponents(newHtml);
+          }
+        });
+      }
+
+      function exportHtml() {
+        const htmlCode = editor.getHtml();
+        const cssCode = editor.getCss();
+        const jsCode = editor.getJs();
 
-<script type="text/javascript">
-  var editor = grapesjs.init({
-      container : '#gjs',
-      ...
-      plugins: ['grapesjs-custom-code'],
-      pluginsOpts: {
-        'grapesjs-custom-code': {
-          // options
+        // Собираем выбранные скрипты
+        const selectedScripts = [];
+        if (document.getElementById('script1-checkbox').checked) {
+          selectedScripts.push(document.getElementById('script1-checkbox').value);
         }
-      }
-  });
-</script>
+        if (document.getElementById('script2-checkbox').checked) {
+          selectedScripts.push(document.getElementById('script2-checkbox').value);
+        }
+        if (document.getElementById('script3-checkbox').checked) {
+          selectedScripts.push(document.getElementById('script3-checkbox').value);
+        }
+
+        // Собираем дополнительные скрипты
+        const additionalScripts = selectedScripts.map(script => `<script src="${script}"><\/script>`).join('');
+
+        // Объединение всего в один HTML-файл
+        const fullHtml = `
+          <!DOCTYPE html>
+          <html>
+          <head>
+            <style>${cssCode}</style>
+          </head>
+          <body>
+            ${htmlCode}
+            <script>${jsCode}<\/script>
+            ${additionalScripts}
+          </body>
+          </html>
+        `;
 
-    
+        // Сохранение HTML-файла
+        const blob = new Blob([fullHtml], { type: 'text/html' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'page.html';
+        a.click();
+      }
+    </script>
   </body>
 </html>