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",
        "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^)\\\~~~

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