quillEditor富文本编辑器实现插入视频

最新推荐文章于 2025-04-12 15:50:44 发布

xiaolongyu3

最新推荐文章于 2025-04-12 15:50:44 发布

阅读量3k

点赞数 1

分类专栏：前端文章标签：前端 javascript java

本文链接：https://blog.csdn.net/u013776700/article/details/125594147

版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用QuillEditor富文本编辑器直接插入并展示视频，而非通过iframe方式。通过自定义video模块，实现了视频标签的创建及属性设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

quillEditor富文本编辑器实现插入视频

quillEditor富文本编辑器实现插入视频默认是通过iframe来展示的，并不符合我们的实际需求，我们需要直接展示视频。
在这里插入图片描述
这里就是直接展示视频的效果。

新建一个video模块用来替换原来video模块

新建video.js

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 = 'simpleVideo'
VideoBlot.tagName = 'video'
export default VideoBlot;

然后在编辑器页面引入，并注册给quill
在这里插入图片描述

插入视频后，使用video标签展示

在quill编辑器后面插入一个input标签。

<input type="file" accept="video/*" name="file" id="uploadFileVideo" @change="changevideo" style="opacity: 0; width: 0; height: 0;cursor: pointer">

在toolbars中增加video支持
在这里插入图片描述

'video': (val) => {
   if (val) {
     document.querySelector("#uploadFileVideo").click();
   } else {
     return;
   }
 }

在这里插入图片描述
这里通过input的点击方法，实现选择视频文件之后，直接插入video标签。
以上代码就是使用video标签插入视频的具体方法。