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标签插入视频的具体方法。