psy_vk

Running

App Files Files Community

DmitrMakeev commited on Aug 11, 2024

Commit

6022ed8

verified ·

1 Parent(s): fcdf023

Update builder2.html

Browse files

Files changed (1) hide show

builder2.html +50 -98

builder2.html CHANGED Viewed

@@ -1,106 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GrapesJS with Code Editor</title>
-    <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
-    <link href="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css" rel="stylesheet">
-    <script src="https://unpkg.com/grapesjs"></script>
-    <script src="https://unpkg.com/grapesjs-component-code-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>
-        var editor = grapesjs.init({
-            container: '#gjs',
-            height: '100%',
-            fromElement: true,
-            storageManager: false,
-            plugins: ['grapesjs-component-code-editor'],
-            pluginsOpts: {
-                'grapesjs-component-code-editor': {
-                    panelId: 'views-container', // ID панель, куда добавляется редактор кода
-                    codeViewOptions: {
-                        theme: 'hopscotch', // Тема редактора кода
-                    }
-                }
-            },
-            panels: {
-                defaults: [
-                    {
-                        id: 'views',
-                        buttons: [
-                            {
-                                attributes: { title: 'Open Code' },
-                                className: 'fa fa-code',
-                                command: 'open-code',
-                                id: 'open-code'
-                            }
-                        ],
-                        appendTo: '.gjs-pn-views-container'
-                    }
-                ]
-            }
-        });
-        // Добавление команды 'open-code', если это необходимо
-        editor.Commands.add('open-code', {
-            run: function(editor) {
-                editor.runCommand('open-code-editor');
-            }
-        });
-        // Обработчик для кнопки экспорта
-        document.getElementById('export-html').addEventListener('click', function() {
-            var html = editor.getHtml();
-            var css = editor.getCss();
-            var blob = new Blob(['<html><head><style>' + css + '</style></head><body>' + html + '</body></html>'], { type: 'text/html' });
-            var 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>

 <!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>