wangEditor富文本编辑器自定义菜单（工具栏）

原创已于 2022-05-09 13:30:55 修改 · 1.4w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

于 2022-05-09 12:03:15 首次发布

springboot 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用WangEditor中的excludeKeys配置来移除部分菜单，如'headerSelect'、'italic'等，并指导读者通过toolbar.getConfig().toolbarKeys获取默认配置。官方示例展示了如何通过excludeKeys方法去除特定菜单项，如blockquote、todo和emotion。

部署运行你感兴趣的模型镜像

如果仅仅想排除掉某些菜单，其他都保留，可以使用 excludeKeys 来配置。
可通过 toolbar.getConfig().toolbarKeys 查看工具栏的默认配置。

import { IToolbarConfig, createToolbar } from '@wangeditor/editor'

const toolbarConfig: Partial<IToolbarConfig> = {
    excludeKeys: [
        'headerSelect',
        'italic',
        'group-more-style' // 排除菜单组，写菜单组 key 的值即可
    ]
}

// 创建 toolbar

如果想排除某个菜单组，可通过 toolbar.getConfig().toolbarKeys 找到这个菜单组的 key。

官方例子中使用excludeKeys方法：

window.toolbar = E.createToolbar({
        editor,
        selector: '#editor-toolbar',
        config: {
            // 去除blockquote引用，todo待办，emotion表情
            excludeKeys: ["blockquote", "todo", "emotion"]
        },
    });

    // console.log(editor.getAllMenuKeys())
    // console.log(toolbar.getConfig().toolbarKeys)
    // var obj = toolbar.getConfig().toolbarKeys
    // for(var i in obj) {
    //     console.log(i,":",obj[i]);
    // }

默认菜单中对应的key值：