Quill上传视频为何提交iframe？

Question

**问题：Quill编辑器上传视频时为何会提交为iframe？** 在使用Quill富文本编辑器上传视频时，开发者常遇到一个问题：为何上传的视频最终以`<iframe></iframe>

Answer 1

1. Quill编辑器简介与富文本内容处理机制

2. Quill 是一个现代化的开源富文本编辑器，支持模块化扩展和高度定制。其核心设计原则之一是将非文本内容（如图片、视频、音频）统一通过“Embed”模块进行管理。

   在 Quill 中，所有嵌入式内容都继承自 Embed 类，该类提供了统一的插入、渲染和更新接口。这种机制使得第三方插件开发更为便捷，也确保了编辑器整体结构的清晰性。

3. 为何默认使用iframe标签来插入视频？

4. 当开发者使用 Quill 的默认视频上传功能时，通常会发现插入的内容是以 <iframe> 标签形式呈现的，而不是 HTML5 原生的 <video> 标签。这背后的原因主要包括以下几点：

   • 跨域资源加载安全限制：许多视频托管平台（如 YouTube、Vimeo）出于安全考虑不允许直接嵌入原生 <video> 标签，而是提供 iframe 链接供嵌入。
   • 播放控制封装：iframe 可以很好地封装视频播放器的功能，包括广告展示、进度条、分享按钮等，避免浏览器兼容问题。
   • 响应式布局适配：iframe 更容易实现响应式设计，尤其是在移动端设备上保持视频比例和播放体验的一致性。

5. Quill 默认模块行为分析

6. Quill 提供了一个名为 video 的内置格式模块，用于处理视频链接。它本质上是一个基于 Embed 的子类，其代码逻辑如下（简化示例）：

   
   class VideoBlot extends Embed {
     static create(value) {
       let node = super.create();
       node.setAttribute('src', value);
       node.setAttribute('frameborder', '0');
       node.setAttribute('allowfullscreen', true);
       return node;
     }
   }
     

   可以看到，该模块创建的是一个 <iframe> 元素，并设置相关属性。这也解释了为何上传视频后会生成 iframe。

7. 是否可以插入原生 video 标签？

8. 答案是肯定的，但需要开发者手动干预 Quill 的默认行为。要实现插入原生 <video> 标签，需完成以下步骤：

   步骤	说明
   1. 自定义 Blot 模块	创建一个新的 blot，继承自 Embed 或 BlockEmbed，并重写 create() 方法，返回 <video> 元素。
   2. 视频上传处理	集成文件上传逻辑，将本地视频上传至服务器并获取可访问的 URL。
   3. 注册新模块	将新创建的 blot 注册到 Quill 编辑器中，并绑定触发方式（如按钮点击）。

9. 流程图：从上传视频到插入 DOM 的全过程

10. graph TD
        A[用户选择视频文件] --> B{是否为远程链接?}
        B -->|是| C[使用iframe插入]
        B -->|否| D[上传至服务器]
        D --> E[获取视频URL]
        E --> F[创建video元素]
        F --> G[插入到编辑区域]

11. 替代方案与最佳实践建议

12. 除了修改 Quill 源码或扩展其模块外，还可以采用以下策略提升用户体验：

    • 使用第三方插件：如 quill-video-resize-module 或 quill-ffmpeg-upload，增强视频上传与预览能力。
    • 前后端协同处理：前端上传视频后，由后端转码并生成适合不同终端播放的格式。
    • 安全性考虑：对上传的视频文件进行 MIME 类型验证、大小限制和病毒扫描。