0

我在我的网络应用程序中使用 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();
    });
  }
},

它工作正常，它显示为在此处输入图像描述

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

4

0 回答 0