wangeditor + element 完成视频上传

之前写过一个修改wangeditor源码上传图片和视频的方法。但是现在项目不是自己打包放到线上， 使用docker部署，所以不能修改wangeditor的源码了。

思路： 使用element-ui 的上传， 获取到视频的路径，再动态添加一个video标签到wangeditor的html content 中

话不多说上源码

<template>
  <div style="position: relative">
    <el-upload // element上传
      :action="url"
      :headers="myHeaders"
      class="upload-demo uploadBtn"
      :limit="1"
      accept=".mp4"
      :show-file-list="false"
      :on-success="handleSuccess"
      :file-list="fileList">
      <i class="el-icon-video-camera"></i>
    </el-upload>
    <div id="editor" style="min-height: 600px;">
    </div>
  </div>
</template>
<script>
  import Editor from 'wangeditor'

  export default {
    name: 'editorElem',
    data () {
      return {
        editor: '',
        editorContent: '',
        fileList: [],
        myHeaders: null,
        url: ''
      }
    },
    props: ['catchData', 'content'], // 接收父组件的数据
    watch: {
      content () {
        this.editor.txt.html(this.content)
      }
    },
    methods: {
      handleSuccess (response, file, fileList) { // el-upload上传成功后的回调， 在这里获取视频路径后添加video标签到editor标签中
        this.fileList = []
        this.editorContent = this.editorContent + `<p><video src="${response.data[0]}" style="width:100%" controls autobuffer autoplay muted/><br></p><p>视频描述： </p>`
        this.catchData(this.editorContent)
        this.editor.txt.html(this.editorContent)
      },
      async initEditor () { // wangeditor的配置选项。 不用原有的视频按钮
        this.editor = new Editor('#editor') /* 括号里面的对应的是html里div的id */
        this.editor.customConfig.menus = [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'emoticon', // 表情
          'image', // 插入图片
          // 'video', // 插入视频
          'table', // 表格
          'undo', // 撤销
          'redo' // 重复

        ]
        this.editor.customConfig.uploadImgMaxLength = 1 // 限制一次最多上传 1 张图片 */
        this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 //* 将图片大小限制为 3M 默认为5M /
        this.editor.customConfig.uploadImgServer = '/api/admin/file/upload'
        //* 自定义图片和视频上传（支持跨域和非跨域上传，简单操作）*/
        this.editor.customConfig.customUploadImg = async (files, insert) => { // 点击按钮的回调
          this.$api.file.upload(files[0]).then(res => { // 调用后台的图片上传方法， 获得图片的网络路径
            const data = res.data
            insert(data)
          })
        }
        this.editor.customConfig.onchange = (html) => {
          //* html 即变化之后的内容 */
          this.editorContent = html
          this.catchData(this.editorContent) // 把这个html通过catchData的方法传入父组件
        }
        this.editor.create() /* 创建编辑器 */
      }
    },
    mounted () {
      this.initEditor()
      
      // 获取接口和token
      var userInfo = window.sessionStorage.getItem('userInfo')
      var token = JSON.parse(userInfo).token
      this.myHeaders = { token: token }
      const baseUrl = (process.env.NODE_ENV !== 'production' ? '/api' : '') + '/admin/file/upload'
      this.url = baseUrl
    }
  }
</script>
<style lang="less" rel="stylesheet/scss">
  .uploadBtn {
    position: absolute;
    left: 585px;
    /*left: 620px;*/
    top: 5px;
    font-size: 20px;
    cursor: pointer;
    color: #999;
  }

  .uploadBtn:hover {
    color: #000;
  }

  .w-e-text-container {
    height: 500px !important;
  }

  .w-e-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
</style>

实际上还是比较简单的， 有几个小坑要注意一下

1.

element 上传的时候会有文件名和上传状态

使用关闭显示文件列表

:show-file-list="false"

2. 关于插入视频标签后没有编辑光标的问题

最开始插入视频标签的时候， 插入之后没有编辑光标， 也不能换行进行编辑

`<p><video src="${response.data[0]}" style="width:100%" controls autobuffer autoplay muted/><br></p><p>视频描述： </p>`

插入视频标签时在最后面添加一个<p>视频描述： </p>就可以解决了

3. 引用

在父组件中使用：

 <el-form-item label="内容:">
        <wangEditor :catchData="catchData" :content="form.content" style="width: 100%;"></wangEditor>
      </el-form-item>

methods： {
	catchData (content) {
        this.form.content = content
      },
}

至此就完成了使用wangeditor + element-ui 在不修改源码的情况下实现上传视频