设置工具栏

 // 设置工具栏    const toolbarConfig = {      // 不需要哪些 写在[]里面      // excludeKeys: ['insertTable', 'group-image'],  //需要的项 自行配置    toolbarKeys: [        'headerSelect',        '|',        'bold',        'underline',        'italic',        {          key: 'group-more-style', // 必填，要以 group 开头          title: '更多样式', // 必填          iconSvg:            '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>', // 可选          menuKeys: ['sup', 'sub', 'clearStyle'] // 下级菜单 key ，必填        },        '|',        'bulletedList',        'numberedList',        'divider',        '|',        // { //image图片 暂不开放        //   key: 'group-image', // 必填，要以 group 开头        //   iconSvg:        //     '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',        //   title: '图片', // 必填        //   menuKeys: ['uploadImage']        // },        'insertTable',        '|',        'redo',        'undo',        '|',        'fullScreen'      ]    };

以上查看可以在@change绑定的函数里面打印出所有的

wangEditor5 设置import { DomEditor } from '@wangeditor/editor';const toolbar = DomEditor.getToolbar(editor)const curToolbarConfig = toolbar.getConfig()console.log( curToolbarConfig.toolbarKeys ) // 当前菜单排序和分组  

DomEditor.getToolbar(editor)后三句会报错里面的editor 可以在change写 能拿到 如下：

const handleCreated = editor => {      editorRef.value = editor; // 记录 editor 实例，重要！    };

配置编辑器

 const editorConfig = {      placeholder: '请输入内容...',      MENU_CONF: {        uploadImage: {          // 上传图片        }      },      hoverbarKeys: {        image: {          // 清空 image 元素的 hoverbar          menuKeys: [            'imageWidth30',            'imageWidth50',            'imageWidth100',            'deleteImage'          ]        },        divider: {          menuKeys: ['enter']        },        table: {          menuKeys: [            'enter',            'tableHeader',            'tableFullWidth',            'insertTableRow',            'deleteTableRow',            'insertTableCol',            'deleteTableCol',            'deleteTable'          ]        },        text: {          menuKeys: ['headerSelect', '|', 'bulletedList', 'bold', 'clearStyle']        },        divider: {          menuKeys: ['enter']        }      }    };

以下查看所有编辑器需要配置项

import { createEditor } from '@wangeditor/editor';const editor = createEditor()console.log(666, editor.getConfig().hoverbarKeys)

参考文章

https://www.wangeditor.com/v4/pages/09-%E7%94%A8%E4%BA%8EVue%E5%92%8CReact/