在tinymce富文本中插入本地视频解决方案

前言

最近在改一个别人的项目时候，遇到一个需求，要在tinymce富文本中添加本地视频。tinymce富文本本身是不具备添加本地视频的功能的。需要使用一些其他手段来添加本地视频。

小demo截图

方法

1.在富文本的外面写一个添加视频的按钮

 点击以后弹出一个小操作框

2.上传本地视频分几个步骤，首先是点击选择视频文本，选择本地的视频

3.选择好以后，点击上传视频把选择的视频文件上传到七牛云，（不懂的可以百度一下七牛云）等网站。

4.把视频添加到富文本里面。添加的方法是直接在富文本里面嵌入HTML的代码，把视频上传到七牛云以后获得的src放入html代码的video标签中。这里要注意，在里面嵌入代码的时候直接

在vue下的实例代码

addVideo() {
      let src = this.src;
      if (src) {
        if (this.userData.content == undefined) {
          tinyMCE.activeEditor.setContent(
            `

               
                 
               
            
`
          )
        }  else {
          tinyMCE.activeEditor.setContent(
            this.userData.content +
            `

               
                 
               
            
`
          )
        }

        this.flag = false;
        this.$message({
          type: 'success',
          message: '添加成功'
        });
      } else {
        this.$message({
          type: 'error',
          message: '请先上传视频'
        });
      }
    }