如何在Quill Editor中实现视频上传功能

你可以直接基于现有的图片上传逻辑做三处核心修改即可实现需求：

• 调整文件选择框的accept属性为视频格式
• 插入内容时将image类型改为video类型
• 在toolbar配置中新增video对应的自定义handler

第一步：修改Quill初始化配置 #

在原有配置的handlers节点新增video处理器绑定：

modules: {
    toolbar: {
      container: '#toolbar',
      handlers: {
        'image': imageHandler,
        'video': videoHandler // 新增video自定义处理器绑定
      }
    }
  },

第二步：实现videoHandler逻辑 #

基于官方image handler代码修改对应参数即可：

function videoHandler() {
  // 选择video对应的文件输入框，类名改为ql-video
  let fileInput = this.container.querySelector('input.ql-video[type=file]');
  if (fileInput == null) {
    fileInput = document.createElement('input');
    fileInput.setAttribute('type', 'file');
    // 修改accept为常见视频格式，可按需扩展
    fileInput.setAttribute('accept', 'video/mp4, video/webm, video/ogg');
    fileInput.classList.add('ql-video');
    fileInput.addEventListener('change', () => {
      if (fileInput.files != null && fileInput.files[0] != null) {
        let reader = new FileReader();
        reader.onload = (e) => {
          let range = this.quill.getSelection(true);
          this.quill.updateContents(new Delta()
            .retain(range.index)
            .delete(range.length)
            // 插入内容类型改为video
            .insert({ video: e.target.result })
          , Emitter.sources.USER);
          fileInput.value = "";
        }
        reader.readAsDataURL(fileInput.files[0]);
      }
    });
    this.container.appendChild(fileInput);
  }
  fileInput.click();
}

注意：由于视频文件通常体积较大，转换为base64后会比原文件大30%左右，可能会导致编辑器内容体积暴涨、保存加载卡顿，如需处理大体积视频更建议上传到服务器后插入视频链接而非使用base64格式。

内容的提问来源于stack exchange，提问作者Anwarul Islam