随机掉落的项目足迹：Vue3 + wangEditor5富文本编辑器——toolbar.getConfig() 查看工具栏的默认配置

问题引入

小提示：问题引入是一个讲故事的废话环节，各位小伙伴可以直接跳到第二大点：问题解决

我的项目不需要在富文本编辑器中引入添加代码块的功能，于是我寻思在工具栏上把操作代码的菜单删一删

 于是我来到官网文档工具栏配置 | wangEditor

找到了相关配置的步骤

到这里一切看起来都还很简单，我只需要在 toolbarConfig.excludeKeys 中添加我要删除的菜单的 key 值就行，好，那接下来我需要取获取“代码块”的 key 值

文档上说获取 key 值用 toolbar.getConfig().toolbarKeys，具体怎么用？往上翻翻文档

轻而易举找到了，到这里还一切顺利

接下来要做的就是把文档上的代码复制到我的项目中，结果一复制，完蛋了，我和代码的爱恨情仇又开始了

哎呀妈呀，这咋报错了嘞？！

于是我就官网文档一顿看，官方视频一顿看，chatGPT一顿问，还是没能找到解决方法，我真服了，必须要吐槽一下了，为什么作者的不严谨需要读者来承担啊！

问题解决

接下来是正确的操作步骤，我也不知道为什么，跟着做就对了

import { onBeforeUnmount, ref, shallowRef, nextTick } from 'vue'
import { DomEditor } from '@wangeditor/editor'
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  nextTick(() => {
    const editor = editorRef.value
    console.log(editor.getAllMenuKeys()) //打印所有注册的菜单Key

    const toolbar = DomEditor.getToolbar(editor)
    const curToolbarConfig = toolbar.getConfig()
    console.log(curToolbarConfig.toolbarKeys) //打印当前菜单的排序、分组
  })
}

上述代码可正常打印菜单 key 值，接下来只需要找到你要删除的项对应的 key 值即可，比如我要删的是有关代码的

其实这个还是比较好找的，根据英文单词的含义去找，不要傻乎乎的一个一个去数

接下来只要在 toolbarConfig 对象中配置需要删除的菜单就好啦

const toolbarConfig = {
  excludeKeys: [
    'codeBlock',
    'code' // 排除菜单组，写菜单组 key 的值即可
  ]
}

这时我们可以看到操作代码的菜单项已经被删除了