设置工具栏
// 设置工具栏 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/
