wangEditor系列之工具栏配置

文章の目录

• 一、查看工具栏的默认配置
• 二、查询编辑器注册的所有菜单 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",        "pider",        "|",        "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    "pider", // 分割线    "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" // 选择语言]

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

  分组index.php/tags-653.html" >可以给key设置 |

  toolbarConfig: {toolbarKeys: ["bold"]}

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

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

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

  toolbarConfig: {excludeKeys: ["italic"]}

  斜体就不在工具栏展现了

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

  toolbarConfig: {modalAppendToBody: true}

  写在最后

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

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

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

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