vue使用富文本编译器插件wangEditor配置上传图片

近日项目组需要实现富文本编译器，经过一番对比决定使用wangEditor，但官方文档有一点不方便理解，故记录

一、安装

npm install @wangeditor/editor --save

二、使用

组件模板部分，这一部分写到组件的templat标签内

<Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
            
        />

引入及注册

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

components: { Editor, Toolbar },

初始配置

可以在data中写好，也可以在mounted中更改

 data() {
    return {
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig :{
        excludeKeys: ['fullScreen', 'code', 'group-video', 'codeBlock', 'bulletedList', 'numberedList', 'blockquote', 'bold', 'italic', 'todo',  'insertImage', 'insertLink', 'emotion'] // 此处不需要的工具栏选项
      },
      editorConfig: { placeholder: '请输入内容...' ,MENU_CONF: {},},
      mode: 'default', // or 'simple'
    }
  },

初始化方法

 onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },

实例销毁时要销毁组件

 beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },

配置图片上传地址

 this.editorConfig.MENU_CONF['uploadImage'] = {
     server: '这里改成你的后台上传的接口地址',//上传接口地址
      headers: {
        Authorization:'Bearer '+getToken()//配置token
      },
      fieldName: 'file'//上传文件名
      }

如果有上传视频等功能同理