wangEditor5 vue3

设置工具栏

 // 设置工具栏    const toolbarConfig = {      // 不需要哪些 写在[]里面      // excludeKeys: ['insertTable', 'group-image'],  //需要的项 自行配置    toolbarKeys: [        'headerSelect',        '|',        'bold',        'underline',        'italic',        {          key: 'group-more-style', // 必填，要以 group 开头          title: '更多样式', // 必填          iconSvg:            '', // 可选          menuKeys: ['sup', 'sub', 'clearStyle'] // 下级菜单 key ，必填        },        '|',        'bulletedList',        'numberedList',        'divider',        '|',        // { //image图片 暂不开放        //   key: 'group-image', // 必填，要以 group 开头        //   iconSvg:        //     '',        //   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/