如何完全自定义 GrapesJs UI答案

【问题标题】：How to Fully customize GrapesJs UI如何完全自定义 GrapesJs UI
【发布时间】：2021-06-29 07:57:34
【问题描述】：

我在我的网络应用程序中使用 Grapesjs 来创建网页。由于我是 GrapesJS 的新手，我不确定如何从 GrapesJs 自定义 UI。我只是使用这个代码。

      const editor = grapes.init({
        container: '#gjs',
        fromElement: true,
        plugins: ["gjs-blocks-basic", "gjs-plugin-ckeditor",
          editor => gjsForms(editor, { /* options */ }),
          editor => gjsnavbar(editor, { /* options */ }),
          editor => styleFilter(editor, { /* options */ }),
          editor => plugin(editor, { /* options */ }),
          editor => flexbox(editor, { /* options */ }),
          editor => slider(editor, { /* options */ }),
          editor => tabs(editor, { /* options */ }),
          editor => customcode(editor, { /* options */ }),
          editor => tooltip(editor, { /* options */ }),
          editor => gjstouch(editor, { /* options */ }),
          editor => thePlugin(editor, { /* options */ }),
        ],
        pluginsOpts: {
          "gjs-blocks-basic": {
            /* ...options */
          },
          'gjs-plugin-ckeditor': {
            options: {
              language: 'en',
              startupFocus: true,
              extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
              allowedContent: true, // Disable auto-formatting, class removing, etc.
              enterMode: CKEDITOR.ENTER_BR,
              uiColor: '#0000001a', // Inline editor color
              extraPlugins: 'justify,colorbutton,panelbutton,font,sourcedialog,showblocks',
              toolbar: [
                ["Format", "-", "Bold", "Italic", "Strike", "Underline", "Subscript", "Superscript", "RemoveFormat", "-", "NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "-", "Link", "Unlink", "Anchor", "TextColor", "BGColor", "-", "ShowBlocks", "-", "Image", "Table", "-", "Sourcedialog"]
              ]
            },
            position: 'left',
          }
        },
        fromElement: false,
        components: LandingPage.components || LandingPage.html,
        style: LandingPage.style || LandingPage.css,
      });

      editor.getConfig().showDevices = 0;

      editor.Panels.addPanel({
        id: "devices-c"
      }).get("buttons").add([{
          id: "set-device-desktop",
          command: function(e) {
            return e.setDevice("Desktop")
          },
          className: "fa fa-desktop",
          active: true
        }, {
          id: "set-device-tablet",
          command: function(e) {
            return e.setDevice("Tablet")
          },
          className: "fa fa-tablet"
        }, {
          id: "set-device-mobile",
          command: function(e) {
            return e.setDevice("Mobile portrait")
          },
          className: "fa fa-mobile"
        },
      ]);

      // Panel should re render again otherwise 
      // New button will not be shown on device panel
      editor.Panels.render();
    });
  }
},

它工作正常，显示为enter image description here

现在我想改变它。编辑器的风格完全定制。隐藏侧边栏仅在选择 Canvus 对象时显示更改图标换颜色更改文本编辑器这些任务怎么做。我不知道。让我知道是否有一些最好的来源来清除所有东西

【问题讨论】：

标签： javascript jquery vue.js grapesjs

【解决方案1】：

可以通过grapes js配置使用element id来完成。这是一个相同的例子。

  grapesjs.init({
  container: '#editor',
  storageManager: false,
  blockManager: {
    appendTo: '#blocks',
  },
  styleManager: {
    appendTo: '#styles-container',
  },
  layerManager: {
    appendTo: '#layers-container',
  },
  traitManager: {
    appendTo: '#trait-container',
  },
  selectorManager: {
    appendTo: '#styles-container',
  },
  deviceManager: {},
  plugins: [],
  pluginsOpts: {},
});

现在根据需要创建 UI。您也可以在 Youtube 上查看相同的视频。

【讨论】：