如何完全自定义 GrapesJs UI

编程问答 2022-04-22

问题描述

我在我的网络应用程序中使用 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,editor => styleFilter(editor,editor => plugin(editor,editor => flexBox(editor,editor => slider(editor,editor => tabs(editor,editor => customcode(editor,editor => tooltip(editor,editor => gjstouch(editor,editor => thePlugin(editor,],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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

grapesjsjavascriptjqueryvue.js