本文介绍:


一、查看工具栏默认配置

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

modedefault

{
    "toolbarKeys": [
        "headerSelect",
        "blockquote",
        "|",
        "bold",
        "underline",
        "italic",
        {
            "key": "group-more-style",
            "title": "更多",
            "iconSvg": "<svg viewBox="0 0 1024 1024"&gt;<path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"&gt;</path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>",
            "menuKeys": [
                "through",
                "code",
                "sup",
                "sub",
                "clearStyle"
            ]
        },
        "color",
        "bgColor",
        "|",
        "fontSize",
        "fontFamily",
        "lineHeight",
        "|",
        "bulletedList",
        "numberedList",
        "todo",
        {
            "key": "group-justify",
            "title": "对齐",
            "iconSvg": "<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>",
            "menuKeys": [
                "justifyLeft",
                "justifyRight",
                "justifyCenter",
                "justifyJustify"
            ]
        },
        {
            "key": "group-indent",
            "title": "缩进",
            "iconSvg": "<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>",
            "menuKeys": [
                "indent",
                "delIndent"
            ]
        },
        "|",
        "emotion",
        "insertLink",
        {
            "key": "group-image",
            "title": "图片",
            "iconSvg": "<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>",
            "menuKeys": [
                "insertImage",
                "uploadImage"
            ]
        },
        {
            "key": "group-video",
            "title": "视频",
            "iconSvg": "<svg viewBox="0 0 1024 1024"><path d="M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z"></path></svg>",
            "menuKeys": [
                "insertVideo",
                "uploadVideo"
            ]
        },
        "insertTable",
        "codeBlock",
        "divider",
        "|",
        "undo",
        "redo",
        "|",
        "fullScreen"
    ],
    "excludeKeys": [],
    "insertKeys": {
        "index": 0,
        "keys": []
    },
    "modalAppendToBody": false
}

modesimple

{
    "toolbarKeys": [
        "blockquote",
        "header1",
        "header2",
        "header3",
        "|",
        "bold",
        "underline",
        "italic",
        "through",
        "color",
        "bgColor",
        "clearStyle",
        "|",
        "bulletedList",
        "numberedList",
        "todo",
        "justifyLeft",
        "justifyRight",
        "justifyCenter",
        "|",
        "insertLink",
        {
            "key": "group-image",
            "title": "图片",
            "iconSvg": "<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>",
            "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^)\~~~
谢谢各位读者们啦(^_^)∠※!!!

原文地址:https://blog.csdn.net/weixin_62277266/article/details/130645112

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_15135.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注