# 前言
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 |
