vue2中使用wangeditor/editor-for-vue富文本插件的方法（封装组件）

首先安装wangeditor/editor-for-vue（node版本问题加上--legacy-peer-deps，不然安装不上）

npm install @wangeditor/editor-for-vue --save --legacy-peer-deps

 这个是封装的文件上传的接口

// 文件上传
  uploadImg: file => {
    const formData = new FormData()
    formData.append('files', file)
    return request({
      url: '/upload/uploadFile',
      method: 'POST',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
  }

 封装的组件代码

 然后再mani.js入口文件全局注册使用即可

import myEditor from '@/components/myEditor/CusWangEditor.vue'

Vue.component('myEditor', myEditor)

 

这样就可了

最主要的就是下面这些代码

// 引入包
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 上传文件的接口
import { videoApi } from '@/api/video'
// 引入wangeditor/editor-for-vue的样式
import '@wangeditor/editor/dist/css/style.css'
// 上传文件的路径前缀
import { baseUrl } from '@/utils/pictureUrl'

MENU_CONF: {
          uploadImage: {
            // 自定义图片上传
            async customUpload(file, insertFn) {
              // 上传图片
              videoApi.uploadImg(file).then(response => {
                if (response.result == 1) {
                  const url = baseUrl + response.msg
                  // 将图片插入到文本框中（一定要记得insertFn到文本框内不然没作用）
                  insertFn(url)
                }
              })
            }
          }
          // uploadVideo: {
          //   // 自定义图片上传
          //   async customUpload(file, insertFn) {
          //     uploadFile('', file).then(response => {
          //       const url = response.data
          //       insertFn(this.$getFilePath(url))
          //     })
          //   }
          // }
        }

beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      // console.log('this.editor :>> ', this.editor.getAllMenuKeys());
    },
    handleInput(value) {
      console.log(value)
      // 将文本内容传给父组件（引用这个组件的vue文件的）
      this.$emit('input', value)
    }
  }