最近开发一个vue项目时用到了wangeditor 记录下如何隐藏菜单组

首先是html部分

<Editor style="height: 500px;width:1400px; overflow-y: hidden;" v-model="html":defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="onChange" />

js导入

import { DomEditor } from '@wangeditor/editor'

这样就可以显示菜单组的id了

onChange(editor) {
   const toolbar = DomEditor.getToolbar(editor)
   console.log("工具栏配置", toolbar.getConfig().toolbarKeys); // 工具栏配置
},

找到需要删除的菜单组key
在这里插入图片描述
最后在excludeKeys内加入key即可

onCreated(editor) {
    this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错
     // console.log(editor.getAllMenuKeys()); //显示所有组件的key


     this.toolbarConfig = {
         excludeKeys: [
             'insertVideo',
             'uploadVideo',
             'group-video'
         ]
     }
 },

成功隐藏了视频菜单组
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐