psy_vk

Running

App Files Files Community

DmitrMakeev commited on Aug 11, 2024

Commit

f781f7b

verified ·

1 Parent(s): 6022ed8

Update builder2.html

Browse files

Files changed (1) hide show

builder2.html +100 -50

builder2.html CHANGED Viewed

@@ -1,58 +1,108 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>GrapesJS Code Editor Example</title>
-  <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
-  <script src="https://unpkg.com/grapesjs"></script>
-  <link rel="stylesheet" href="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css">
-  <script src="https://unpkg.com/grapesjs-component-code-editor"></script>
-  <style>
-    body, html {
-      margin: 0;
-      height: 100%;
-    }
-  </style>
 </head>
 <body>
-  <div id="gjs"></div>
-  <script type="text/javascript">
-    const editor = grapesjs.init({
-      container: '#gjs',
-      height: '100%',
-      fromElement: true,
-      storageManager: false,
-      plugins: ['grapesjs-component-code-editor'],
-      pluginsOpts: {
-        'grapesjs-component-code-editor': {
-          // options
-        }
-      }
-    });
-    // Добавляем команду для открытия редактора кода
-    editor.Commands.add('open-code', {
-      run: function(editor) {
-        editor.runCommand('open-code-editor');
-      }
-    });
-    // Добавляем кнопку для открытия редактора кода
-    const pn = editor.Panels;
-    const panelViews = pn.addPanel({
-      id: "views",
-    });
-    panelViews.get("buttons").add([
-      {
-        attributes: {
-          title: "Open Code",
-        },
-        className: "fa fa-file-code-o",
-        command: "open-code",
-        togglable: false, // Не закрывать при повторном нажатии
-        id: "open-code",
-      },
-    ]);
-  </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GrapesJS with Script Editor</title>
+    <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
+    <link href="https://unpkg.com/grapesjs-script-editor/dist/grapesjs-script-editor.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/grapesjs"></script>
+    <script src="https://unpkg.com/grapesjs-script-editor"></script>
+    <style>
+        body, html {
+            margin: 0;
+            height: 100%;
+        }
+        #gjs {
+            height: 100vh;
+        }
+        .controls-container {
+            background-color: #302f2f;
+            padding: 15px 0;
+            text-align: center;
+        }
+        .controls-container label,
+        .controls-container button {
+            margin-left: 15px;
+        }
+        #export-html {
+            background-color: #ccc;
+            color: #000;
+            border: none;
+            padding: 10px 15px;
+            font-size: 16px;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: background-color 0.3s ease;
+        }
+        #export-html:hover {
+            background-color: #bbb;
+        }
+        .controls-container label {
+            color: #fff;
+        }
+    </style>
 </head>
 <body>
+    <div id="gjs"></div>
+    <div class="controls-container">
+        <button id="export-html">Скачать HTML</button>
+    </div>
+    <script>
+        const editor = grapesjs.init({
+            container: '#gjs',
+            height: '100%',
+            fromElement: true,
+            storageManager: false,
+            plugins: ['grapesjs-script-editor'],
+            pluginsOpts: {
+                'grapesjs-script-editor': {
+                    toolbarIcon: '<i class="fa fa-puzzle-piece"></i>', // Иконка в панели инструментов
+                    scriptTypesSupport: ['default', 'text', 'textnode'], // Поддержка скриптов для текстовых блоков
+                    modalTitle: 'Script Editor', // Заголовок модального окна
+                    buttonLabel: 'Save', // Текст кнопки сохранения
+                    onRun: () => console.log('Script is valid'), // Логика при успешной проверке
+                    onError: err => console.log('Error:', err) // Логика при ошибке
+                }
+            },
+            panels: {
+                defaults: [
+                    {
+                        id: 'views',
+                        buttons: [
+                            {
+                                attributes: { title: 'Open Script Editor' },
+                                className: 'fa fa-puzzle-piece',
+                                command: 'edit-script',
+                                id: 'edit-script'
+                            }
+                        ],
+                        appendTo: '.gjs-pn-views-container'
+                    }
+                ]
+            }
+        });
+        // Команда для открытия редактора скриптов
+        editor.Commands.add('edit-script', {
+            run: function(editor) {
+                editor.runCommand('script-editor');
+            }
+        });
+        // Обработчик для кнопки экспорта
+        document.getElementById('export-html').addEventListener('click', function() {
+            const html = editor.getHtml();
+            const css = editor.getCss();
+            const blob = new Blob(['<html><head><style>' + css + '</style></head><body>' + html + '</body></html>'], { type: 'text/html' });
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = 'page.html';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        });
+    </script>
 </body>
+</html>