Update pages.html

pages.html

@@ -767,128 +767,111 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
 
   
   
-  <script type="text/javascript">
-    // Wait for the plugin to be injected by the dev server
-    setTimeout(() => {
-      var editor = grapesjs.init({
-        height: '100%',
-        container: '#gjs',
-        showOffsets: true,
-        fromElement: true,
-        noticeOnUnload: false,
-        storageManager: false,
-        selectorManager: {
-          componentFirst: true,
+<script type="text/javascript">
+var editor = grapesjs.init({
+    container: '#gjs',
+    fromElement: true,
+    height: "100vh",
+    storageManager: {
+      type: 'local',
+      autosave: true,
+      autoload: true,
+      stepsBeforeSave: 1,
+    },
+    plugins: [
+      "gjs-blocks-basic",
+      "grapesjs-component-countdown",
+      "grapesjs-component-code-editor",
+      "grapesjs-templates",
+      "grapesjs-rte-extensions",
+      "grapesjs-user-blocks",
+      "grapesjs-tabs", // Плагин вкладок
+      "grapesjs-tooltip", // Плагин подсказок
+      "grapesjs-script-editor", // Плагин редактора скриптов
+      "grapesjs-rulers" // Добавляем плагин линеек
+    ],
+    pluginsOpts: {
+      "gjs-blocks-basic": {
+        blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'quote', 'social'],
+        blocksBasicOpts: {
+          flexGrid: true,
+          stylePrefix: 'gjs-',
+          columns: 12,
+          rowHeight: 75,
+          addBasicStyle: true
+        }
+      },
+      "grapesjs-component-code-editor": {
+        panelId: 'views-container',
+        appendTo: '.gjs-pn-views-container',
+        openState: { pn: '35%', cv: '65%' },
+        closedState: { pn: '15%', cv: '85%' },
+        codeViewOptions: {},
+        preserveWidth: false,
+        clearData: false,
+        editJs: true,
+        cleanCssBtn: true,
+        htmlBtnText: 'Применить',
+        cssBtnText: 'Применить',
+        cleanCssBtnText: 'Удалить'
+      },
+      "grapesjs-templates": {
+        // Настройки для grapesjs-templates
+      },
+      "grapesjs-rte-extensions": {
+        base: {
+          bold: true,
+          italic: true,
+          underline: true,
+          strikethrough: true,
+          link: true,
         },
-        canvas: {
-          styles: ['https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap-grid.min.css']
+        fonts: {
+          fontColor: true,
+          hilite: true,
         },
-        plugins: [
-          'gjs-blocks-basic',
-          'grapesjs-plugin-forms',
-          'grapesjs-component-countdown',
-          'grapesjs-plugin-export',
-          'grapesjs-tabs',
-          'grapesjs-custom-code',
-          'grapesjs-touch',
-          'grapesjs-parser-postcss',
-          'grapesjs-tooltip',
-          'grapesjs-tui-image-editor',
-          'grapesjs-typed',
-          'grapesjs-style-bg',
-          'grapesjs-preset-webpage',
-          'grapesjs-templates'
-        ],
-        pluginsOpts: {
-          'gjs-blocks-basic': { flexGrid: true, blocks: ['text', 'link', 'image', 'video', 'map'] },
-          'grapesjs-tui-image-editor': {
-            script: [
-              // 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
-              'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
-              'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
-              'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
-            ],
-            style: [
-              'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
-              'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
-            ],
-          },
-          'grapesjs-tabs': {
-            tabsBlock: { category: 'Extra' }
-          },
-          'grapesjs-typed': {
-            block: {
-              category: 'Extra',
-              content: {
-                type: 'typed',
-                'type-speed': 40,
-                strings: [
-                  'Text row one',
-                  'Text row two',
-                  'Text row three',
-                ],
-              }
-            }
-          },
-          'grapesjs-preset-webpage': {
-            modalImportTitle: 'Import Template',
-            modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
-            modalImportContent: function (editor) {
-              return editor.getHtml() + '<style>' + editor.getCss() + '</style>'
-            },
-          },
-          'grapesjs-templates': {
-            contactForms: [
-              { id: 1000, label: 'Contact us' },
-              { id: 1001, label: 'Contact us 2' }
-            ],
-            templates: 'http://localhost:3000/templates',
-            projects: 'http://localhost:3000/projects',
-            //onLoad: (type) => {
-            //  return []
-            //}
-          }
+        format: {
+          heading1: true,
+          heading2: true,
+          heading3: true,
+          paragraph: true,
+          clearFormatting: true,
         },
-      });
-
-      window.editor = editor
-
-
-      var pn = editor.Panels;
-
-      editor.on('load', () => {
-        var $ = grapesjs.$;
-        // Load and show settings and style manager
-        var openTmBtn = pn.getButton('views', 'open-tm');
-        openTmBtn && openTmBtn.set('active', 1);
-        var openSm = pn.getButton('views', 'open-sm');
-        openSm && openSm.set('active', 1);
-
-        // Remove trait view
-        pn.removeButton('views', 'open-tm');
-
-        // Add Settings Sector
-        var traitsSector = $('<div class="gjs-sm-sector no-select">' +
-          '<div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></div>' +
-          '<div class="gjs-sm-properties" style="display: none;"></div></div>');
-        var traitsProps = traitsSector.find('.gjs-sm-properties');
-        traitsProps.append($('.gjs-traits-cs'));
-        $('.gjs-sm-sectors').before(traitsSector);
-        traitsSector.find('.gjs-sm-sector-title').on('click', function () {
-          var traitStyle = traitsProps.get(0).style;
-          var hidden = traitStyle.display == 'none';
-          if (hidden) {
-            traitStyle.display = 'block';
-          } else {
-            traitStyle.display = 'none';
-          }
-        });
-
-        // Open block manager
-        var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
-        openBlocksBtn && openBlocksBtn.set('active', 1);
-      })
-    }, 100);
+        align: true,
+        darkColorPicker: true,
+        maxWidth: '600px'
+      },
+      "grapesjs-user-blocks": {
+        // Настройки для grapesjs-user-blocks
+      },
+      "grapesjs-tabs": {
+        // Настройки для grapesjs-tabs
+      },
+      "grapesjs-tooltip": {
+        // Настройки для grapesjs-tooltip
+      },
+      "grapesjs-script-editor": {
+        // Настройки для grapesjs-script-editor
+        starter: 'let el = this',
+        toolbarIcon: '<i class="fa fa-puzzle-piece"></i>',
+        scriptTypesSupport: ['default', 'wrapper', 'text', 'textnode', 'image', 'video', 'svg'],
+        toolbarBtnCustomScript: {},
+        onRun: () => console.log('valid syntax'),
+        onError: err => console.log('error:', err),
+        modalTitle: 'Script',
+        codeViewOptions: {},
+        buttonLabel: 'save',
+        commandAttachScript: {}
+      },
+      "grapesjs-rulers": {
+        // Настройки для grapesjs-rulers
+        dragMode: 'translate',
+        rulerHeight: 15,
+        canvasZoom: 94,
+        rulerOpts: {}
+      }
+    }
+  });
   </script>