vue集成wangEditor4可上传视频

参考：
wangEditor上传本地视频 - 简书 (jianshu.com)

前言：
wangEditor4是一个富文本编辑框，可以上传图片和视频。

版本："wangeditor": "^4.7.11"

集成代码

image.png

1、创建一个Vue组件
//视频上传以上为图片上传配置，以下为视频上传配置。

<template>
  <div>
    <div ref="editor" style="text-align:left; width: 1100px; " />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import E from 'wangeditor'
import { getToken } from '@/utils/auth'
import log from '@/views/system/timing/log'
export default {
  name: 'Editor',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    isClear: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isChange:false,
      headers: {
        'token': getToken()
      },
      info: null,
      editor: null
    }
  },
  computed: {
    ...mapGetters([
      'uploadApi',
      'uploadVideo'
    ])
  },
  watch: {
    // value: function(val) {
    //   this.editor.txt.html(val)
    //   // this.editor.txt.html(val)
    // }
    value: function(value) {
      // if (value !== this.editor.txt.html()) {
      //   this.editor.txt.html(this.value)
      // }
      if(value !== this.editor.txt.html()){
        this.editor.txt.html(this.value);
      }
      // this.editor.selection.moveCursor(this.editor.$textElem.elems[0],false);
    }
  },
  mounted() {
    this.editor = new E(this.$refs.editor)
    this.editor.customConfig = this.editor.customConfig ? this.editor.customConfig : this.editor.config
    this.editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
    // 不可修改
    this.editor.customConfig.uploadImgHeaders = this.headers
    // 自定义文件名，不可修改，修改后会上传失败
    this.editor.customConfig.uploadFileName = 'file'
    this.editor.customConfig.uploadImgServer = this.uploadApi // 上传图片到服务器
    this.editor.customConfig.uploadImgHooks = {
      customInsert: function(insertImg, result, editor) {
        var url = result.link
        insertImg(url)
      }
    }
    this.editor.customConfig.onblur = html => {
      this.$emit('input',html)
      this.$emit('change', html)
      this.$emit('catchData',html)//catchData(html)
    }
    // this.editor.customConfig.onchange = (html) => {
    //   this.isChange = true;
    //   this.info = html
    //   console.log(this.info)
    //   this.$emit('change', this.info)
    //   this.$emit('input', this.info)
    // }

    //视频上传
    this.editor.customConfig.uploadVideoServer = this.uploadVideo // 上传接口
    this.editor.customConfig.uploadVideoParams = {
      'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarycZm1pHksXeHS6t5r'
    }
    // this.editor.config.uploadVideoParams = {
    //   'Content-Type': 'multipart/form-data'
    // }
    this.editor.customConfig.uploadVideoHeaders = this.headers// 自定义 header
    this.editor.customConfig.uploadVideoName = 'file'
    this.editor.customConfig.uploadVideoHooks = {
      customInsert: function (insertVideo, result) {
        console.log('result--->', result)
        if (result.errno === 0) {
          const link = result.link
          insertVideo(link)
          // (result.data || '').split(',').forEach(function (link) {
          //   link && insertVideo(link)
          // })
        } else {
          console.log('result--->', result)
          // flavrShowByTime('上传失败', null, 'danger')
        }
      }
    }

    this.editor.create()
    this.editor.txt.html(this.value)
  }
}
</script>

<style scoped>
.editor-content{
  padding-left: 5px;
}
</style>

提示：
这里有一个vue知识点，以下代码的作用是？
vue用来得到一些公共参数的方式，比如这里我是用来获取服务端上传图片和视频的地址。

    ...mapGetters([
      'uploadApi',
      'uploadVideo'
    ])