Quill富文本基于视频的改造

一、视频上传弹窗

<!-- 视频上传 -->
    <el-dialog
      width="50%"
      title="视频上传"
      :visible.sync="videoUploadTag"
      append-to-body
    >
      <el-input
        v-model="videoLink"
        placeholder="请输入视频链接，仅支持MP4、Ogg、WebM格式。例https://xxxx/xx.mp4"
        clearable
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="videoUploadTag = false">取 消</el-button>
        <el-button type="primary" @click="addVideoLink">添 加</el-button>
      </span>
    </el-dialog>

二、初始化配置

import Quill from "quill";
// 视频video
const BlockEmbed = Quill.import("blots/block/embed");
class VideoBlot extends BlockEmbed {// 自定义视频：大小等属性
  static create(value) {
    let node = super.create()
    node.setAttribute('src', value.url)
    node.setAttribute('controls', value.controls)
    node.setAttribute('width', value.width)
    node.setAttribute('height', value.height)
    node.setAttribute('webkit-playsinline', true)
    node.setAttribute('playsinline', true)
    node.setAttribute('x5-playsinline', true)
    return node
  }

  static value(node) {
    return {
      url: node.getAttribute('src'),
      controls: node.getAttribute('controls'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height')
    }
  }
}
VideoBlot.blotName = 'video'
VideoBlot.tagName = 'video'
Quill.register(VideoBlot)

三、确认上传视频方法：

// 确认上传视频
    addVideoLink() {
      if (this.videoLink.length == 0) {
        this.$message.error("请输入视频链接");
      }
      //当编辑器中没有输入文本时，这里获取到的 range 为 null
      var range = this.Quill.selection.savedRange;
      //视频插入在富文本中的位置
      var index = 0;
      if (range == null) {
        index = 0;
      } else {
        index = range.index;
      }
      //隐藏弹框
      this.videoUploadTag = false;
      //将视频链接插入到当前的富文本当中
      this.Quill.insertEmbed(index, "video", {
        url: this.videoLink,
        controls: "controls",
        width: '100%'
      });
    },

四、toolbar配置，劫持原来的视频点击事件

handlers: {
              image: function (value) {
                // 劫持原来的图片点击按钮事件
                QuillWatch.emit(this.quill.id);
              },
              video: function (val) {
                self.videoUploadTag = true;
                self.videoLink = '';
              },
            },

//显示插入视频链接弹框的标识
      videoUploadTag: false,
      //弹框插入的视频链接记录
      videoLink: "",