文章の目录

• 一、查看工具栏的默认配置
• 二、查询编辑器注册的所有菜单 key （可能有的不在工具栏上）
• 三、重新配置工具栏，显示哪些菜单，以及菜单的排序、分组
• 四、在当前 toolbarKeys 的基础上继续插入新菜单，如自定义扩展的菜单
• 五、想排除掉某些菜单，其他都保留
• 六、将菜单弹出的 modal 添加到 body 下
• 写在最后

  ---

  一、查看工具栏的默认配置

  import { DomEditor } from "@wangeditor/editor";
  ...
  const toolbar = DomEditor.getToolbar(this.editor);
  const curToolbarConfig = toolbar.getConfig();
  console.log(curToolbarConfig);
  

  mode为default

  

  {
      "toolbarKeys": [
          "headerSelect",
          "blockquote",
          "|",
          "bold",
          "underline",
          "italic",
          {
              "key": "group-more-style",
              "title": "更多",
              "iconSvg": "",
              "menuKeys": [
                  "through",
                  "code",
                  "sup",
                  "sub",
                  "clearStyle"
              ]
          },
          "color",
          "bgColor",
          "|",
          "fontSize",
          "fontFamily",
          "lineHeight",
          "|",
          "bulletedList",
          "numberedList",
          "todo",
          {
              "key": "group-justify",
              "title": "对齐",
              "iconSvg": "",
              "menuKeys": [
                  "justifyLeft",
                  "justifyRight",
                  "justifyCenter",
                  "justifyJustify"
              ]
          },
          {
              "key": "group-indent",
              "title": "缩进",
              "iconSvg": "",
              "menuKeys": [
                  "indent",
                  "delIndent"
              ]
          },
          "|",
          "emotion",
          "insertLink",
          {
              "key": "group-image",
              "title": "图片",
              "iconSvg": "",
              "menuKeys": [
                  "insertImage",
                  "uploadImage"
              ]
          },
          {
              "key": "group-video",
              "title": "视频",
              "iconSvg": "",
              "menuKeys": [
                  "insertVideo",
                  "uploadVideo"
              ]
          },
          "insertTable",
          "codeBlock",
          "divider",
          "|",
          "undo",
          "redo",
          "|",
          "fullScreen"
      ],
      "excludeKeys": [],
      "insertKeys": {
          "index": 0,
          "keys": []
      },
      "modalAppendToBody": false
  }
  

  mode为simple

  {
      "toolbarKeys": [
          "blockquote",
          "header1",
          "header2",
          "header3",
          "|",
          "bold",
          "underline",
          "italic",
          "through",
          "color",
          "bgColor",
          "clearStyle",
          "|",
          "bulletedList",
          "numberedList",
          "todo",
          "justifyLeft",
          "justifyRight",
          "justifyCenter",
          "|",
          "insertLink",
          {
              "key": "group-image",
              "title": "图片",
              "iconSvg": "",
              "menuKeys": [
                  "insertImage",
                  "uploadImage"
              ]
          },
          "insertVideo",
          "insertTable",
          "codeBlock",
          "|",
          "undo",
          "redo",
          "|",
          "fullScreen"
      ],
      "excludeKeys": [],
      "insertKeys": {
          "index": 0,
          "keys": []
      },
      "modalAppendToBody": false
  }
  

  下方分别介绍对面得四个属性

  二、查询编辑器注册的所有菜单 key （可能有的不在工具栏上）

  const allMenuKeys = this.editor.getAllMenuKeys();
  console.log(allMenuKeys);
  

  结果如下

  

  [
      "bold", // 粗体
      "underline", // 下划线
      "italic", // 斜体
      "through", // 删除线
      "code", // 行内代码
      "sub", // 下标
      "sup", // 上标
      "clearStyle", // 清除格式
      "color", // 字体颜色
      "bgColor", // 背景色
      "fontSize", // 字号
      "fontFamily", // 字体
      "indent", // 增加缩进
      "delIndent", // 减少缩进
      "justifyLeft", // 左对齐
      "justifyRight", // 右对齐
      "justifyCenter", // 居中对齐
      "justifyJustify", // 两端对齐
      "lineHeight", // 行高
      "insertImage", // 网络图片
      "deleteImage", // 删除图片
      "editImage", // 编辑图片
      "viewImageLink", // 查看链接
      "imageWidth30", // 图片宽度相对于编辑器宽度的百分比30
      "imageWidth50", // 图片宽度相对于编辑器宽度的百分比50
      "imageWidth100", // 图片宽度相对于编辑器宽度的百分比100
      "divider", // 分割线
      "emotion", // 表情
      "insertLink", // 插入链接
      "editLink", // 修改链接
      "unLink", // 取消链接
      "viewLink", // 查看链接
      "codeBlock", // 代码块
      "blockquote", // 引用
      "headerSelect", // 标题
      "header1", // 标题1
      "header2", // 标题2
      "header3", // 标题3
      "header4", // 标题4
      "header5", // 标题5
      "todo", // 待办
      "redo", // 重做
      "undo", // 撤销
      "fullScreen", // 全屏
      "enter", // 回车
      "bulletedList", // 无序列表
      "numberedList", // 有序列表
      "insertTable", // 插入表格
      "deleteTable", // 删除表格
      "insertTableRow", // 插入行
      "deleteTableRow", // 删除行
      "insertTableCol", // 插入列
      "deleteTableCol", // 删除列
      "tableHeader", // 表头
      "tableFullWidth", // 宽度自适应
      "insertVideo", // 插入网络视频
      "uploadVideo", // 上传视频
      "editVideoSize", // 修改视频尺寸
      "uploadImage", // 上传图片
      "codeSelectLang" // 选择语言
  ]
  

  三、重新配置工具栏，显示哪些菜单，以及菜单的排序、分组

  分组可以给key设置 |

  toolbarConfig: {
  	toolbarKeys: ["bold"]
  }
  

  四、在当前 toolbarKeys 的基础上继续插入新菜单，如自定义扩展的菜单

  toolbarConfig: {
  	insertKeys: {
  		index: 1, // 插入的位置，基于当前的 toolbarKeys
  		keys: ["headerSelect", "italic"]
  	}
  }
  

  五、想排除掉某些菜单，其他都保留

  toolbarConfig: {
  	excludeKeys: ["italic"]
  }
  

  斜体就不在工具栏展现了

  六、将菜单弹出的 modal 添加到 body 下

  toolbarConfig: {
  	modalAppendToBody: true
  }
  

  写在最后

  如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???

  

  如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//

  如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~

  谢谢各位读者们啦(^_^)∠※！！！