# 前言

vue-quill-editor 修改内置视频标签 iframe 改为 video
本篇文章均不是原创,为了方便以后 ctrlCV

# method one

新建工具函数 video.js

import { Quill } from 'vue-quill-editor'
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)
  }
  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' 
Video.className = 'ql-video'
Video.tagName = 'video' 
export default Video

在组件中引入注册

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css'
import * as Quill from 'quill'
import Video from '@/utils/video'
Quill.register(Video, true)
// editor.insertEmbed(editor.selection.savedRange.index, 'video', url)

# method two

import { Quill } from 'vue-quill-editor'
const BlockEmbed = Quill.import('blots/block/embed')
class Video 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')
    }
  }
}
Video.blotName = 'video'
Video.tagName = 'video'
export default Video

在组件中引入注册

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css'
import * as Quill from 'quill'
import Video from '@/utils/video'
Quill.register(Video, true)
editor.insertEmbed(editor.selection.savedRange.index, 'video', {
  url: `http://data.szhgy.cn/media/image?id=${xhr.response}`,
  controls: 'controls',
  width: '100%',
  height: '100%'
})

# method three

根据官方文档进行修改

import { Quill } from 'vue-quill-editor'
const BlockEmbed = Quill.import('blots/block/embed')
class Video extends BlockEmbed {
  static create(url) {
    let node = super.create()
    node.setAttribute('src', url)
    // Set non-format related attributes with static values
    node.setAttribute('frameborder', '0')
    node.setAttribute('allowfullscreen', true)
    return node
  }
  static formats(node) {
    // We still need to report unregistered embed formats
    let format = {}
    if (node.hasAttribute('height')) {
      format.height = node.getAttribute('height')
    }
    if (node.hasAttribute('width')) {
      format.width = node.getAttribute('width')
    }
    return format
  }
  static value(node) {
    return node.getAttribute('src')
  }
  format(name, value) {
    // Handle unregistered embed formats
    if (name === 'height' || name === 'width') {
      if (value) {
        this.domNode.setAttribute(name, value)
      } else {
        this.domNode.removeAttribute(name, value)
      }
    } else {
      super.format(name, value)
    }
  }
}
Video.blotName = 'video'
Video.tagName = 'video'
export default Video
更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

山河 微信支付

微信支付

山河 支付宝

支付宝

山河 贝宝

贝宝