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

原创 2022-05-09 13:30:55 1.4w 阅读 AI写同款

收录于

springboot

种麦南山下

码龄13年墨衍会员 · AI 创作全网分发

182粉丝171篇原创

关注

如何在vue2中使用富文本编辑器wangEditor，以及修改配置工具栏toolbarKeys、excludeKeys 在需求中遇到一个问题，要在同一个页面展示并支持编辑多个富文本。修改工具栏，仅支持部分工具使用。阅读详情

AI摘要

本文介绍了如何使用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值：