问题引入
小提示:问题引入是一个讲故事的废话环节,各位小伙伴可以直接跳到第二大点:问题解决
我的项目不需要在富文本编辑器中引入添加代码块的功能,于是我寻思在工具栏上把操作代码的菜单删一删
于是我来到官网文档工具栏配置 | 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.valueconsole.log(editor.getAllMenuKeys()) //打印所有注册的菜单Keyconst toolbar = DomEditor.getToolbar(editor)const curToolbarConfig = toolbar.getConfig()console.log(curToolbarConfig.toolbarKeys) //打印当前菜单的排序、分组})
}
上述代码可正常打印菜单 key 值,接下来只需要找到你要删除的项对应的 key 值即可,比如我要删的是有关代码的
其实这个还是比较好找的,根据英文单词的含义去找,不要傻乎乎的一个一个去数
接下来只要在 toolbarConfig 对象中配置需要删除的菜单就好啦
const toolbarConfig = {excludeKeys: ['codeBlock','code' // 排除菜单组,写菜单组 key 的值即可]
}
这时我们可以看到操作代码的菜单项已经被删除了