当我们使用vue-quill-editor时(quill也一样),需要添加插入音频和视频资源,这时我们可以自定义video和auido标签,动态赋值并使用
话不多说,立即上代码
引入
import { Quill, quillEditor } from 'vue-quill-editor'
自定义类
const BlockEmbed = Quill.import('blots/block/embed')
// 添加插入视频
class VideoBlot extends BlockEmbed {
static create(value) {
const node = super.create()
node.setAttribute('src', value.url)
node.setAttribute('title', value.name)
node.setAttribute('controls', value.controls)
node.setAttribute('controlslist', value.controlslist)
node.setAttribute('width', value.width)
node.setAttribute('height', value.height)
node.setAttribute('webkit-playsinline', true)
node.setAttribute('playsinline', true)
node.setAttribute('x5-playsinline', true)
if (value.autoplay) {
node.setAttribute('autoplay', value.autoplay)
}
return node
}
static value(node) {
return {
url: node.getAttribute('src'), // 注意这里和上面的属性和值反过来相对
name: node.getAttribute('title'),
autoplay: node.getAttribute('autoplay'),
controls: node.getAttribute('controls'),
controlslist: node.getAttribute('controlslist'),
width: node.getAttribute('width'),
height: node.getAttribute('height')
}
}
}
VideoBlot.blotName = 'video' //quill使用时的名称
VideoBlot.tagName = 'video' //定义的html标签名
Quill.register(VideoBlot) // 注册
使用
const newaudio = {
url: file_response.data.url,
autoplay: this.audio.autoplay,
controls: 'controls',
controlslist: this.audio.controlslist,
width: this.audio.width ? this.audio.width + 'px' : '100%',
height: this.audio.height ? this.audio.height + 'px' : '100%',
}
const quill = this.$refs.myQuillEditor.quill
// 获取光标所在位置
const length = quill.selection.savedRange.index
// 插入video
quill.insertEmbed(length, 'video', newvideo) // 'video'即为上面定义的blotName
// 调整光标到最后
quill.setSelection(length + 1)
你也可以自定义其他标签,如audio,img等等,方法一样