项目场景:

vue-quill-editor是常用的富文本编辑器插件,内置的video模块是使用iframe标签,但是目前遇到的问题的是竖屏的视频不能正确的展示,要设置iframe内的video宽高为100%才行,所以想要video标签来替换iframe。

问题描述:

在这里插入图片描述视频控件不能完整展示,video标签的宽高设为100%之后也不能满足需求,查了资料之后决定采用video标签。
在这里插入图片描述

解决方案:

首先在vue工程目录下创建quill文件夹及文件:src/quill/video.js

import { Quill } from "vue-quill-editor";
// 源码中是import直接倒入,这里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')

const ATTRIBUTES = ['height', 'width']

class Video extends BlockEmbed {
  static create(value) {
    const node = super.create(value)
    // 添加video标签所需的属性
    node.setAttribute('controls', 'controls')
    node.setAttribute('type', 'video/mp4')
    node.setAttribute('src', this.sanitize(value))
    return node
  }

  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute)
      }
      return formats
    }, {})
  }

  static sanitize(url) {
    return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
  }

  static value(domNode) {
    return domNode.getAttribute('src')
  }

  format(name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value)
      } else {
        this.domNode.removeAttribute(name)
      }
    } else {
      super.format(name, value)
    }
  }

  html() {
    const { video } = this.value()
    return `<a href="${video}">${video}</a>`
  }
}
Video.blotName = 'video' // 这里不用改,楼主不用iframe,直接替换掉原来,如果需要也可以保留原来的,这里用个新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframe

export default Video

然后在vue文件中引入quill
在这里插入图片描述
到这一步基本也就实现了,总结的话就是分为三步:
1.新建一个quill/video.js
2.vue文件中引入video.js
3.quill注册引入的video模块
使用方法还是和原来的一样,弹出url输入框时输入MP4文件的url地址就可以了
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐