记录wangeditor在vue中工具栏配置和图片上传

项目场景：

项目场景：vue中使用wangeditor

---

问题描述

自定义工具栏，自定义上传图片保存和预览

解决方案：

1. 引入

import { createEditor, createToolbar } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'
<!-- 页面-->
<div id="editor—wrapper" style="border: 1px solid #ccc;height: 700px">
            <div id="toolbar-container"><!-- 工具栏 --></div>
            <div id="editor-container" style='height: 85%'><!-- 编辑器 --></div>
          </div>

2. 初始化加载编辑器和工具栏

createEditor() {
        const editorConfig = {
          placeholder: '请输入邮件内容...',
          MENU_CONF: {
            uploadImage: {
              server: 'api/sysFileInfo/editorUpload/image',
              timeout: 5 * 1000, // 5s,
              fieldName: 'file',
              meta: { token: 'xxx', a: 100 },
              metaWithUrl: false, // join params to url
              headers: { Accept: 'text/x-json' },

              maxFileSize: 10 * 1024 * 1024, // 10M

              base64LimitSize: 1 * 1024, // insert base64 format, if file's size less than 5kb
              onBeforeUpload(file) {
                return file
              },
              onProgress(progress) {
              },
              onSuccess(file, res) {
              },
              onFailed(file, res) {
                alert(res.message)
              },
              onError(file, err, res) {
                alert(err.message)
              },
              customInsert(res, insertFn) { // TS 语法
                insertFn(process.env.VUE_APP_API_BASE_URL + res.data.url, res.data.alt, '')
              }
            }
          }
        }

        const editor = createEditor({
          selector: '#editor-container',
          html: '<p><br></p>',
          config: editorConfig,
          mode: 'default' // or 'simple'
        })

        const toolbarConfig = {
          excludeKeys: ['fullScreen', 'group-video', 'insertLink', 'insertImage'] // 配置菜单f12根据data-menu-key配置
        }

        // eslint-disable-next-line no-unused-vars
        const toolbar = createToolbar({
          editor,
          selector: '#toolbar-container',
          config: toolbarConfig,
          mode: 'default' // or 'simple'
        })
      }

editorConfig.MENU_CONF.uploadImage.server配置图片上传地址
customInsert方法中返回图片上传完成后图片地址
参考文档：wangeditor图片上传
toolbarConfig.excludeKeys中去除工具栏不需要显示的菜单，可以F12，根据data-menu-key查看对应菜单参数