import { Quill } from 'vue-quill-editor';
|
|
const BlockEmbed = Quill.import('blots/block/embed');
|
const Link = Quill.import('formats/link');
|
|
const ATTRIBUTES = ['height', 'width', 'controls', 'src', ];
|
|
class VideoBlot extends BlockEmbed {
|
static create(value) {
|
const node = super.create();
|
|
if (typeof value === 'object') {
|
node.setAttribute('src', this.sanitize(value.url));
|
node.setAttribute('width', value.width || '100%');
|
node.setAttribute('height', value.height || 'auto');
|
node.setAttribute('controls', value.controls || 'controls');
|
} else {
|
node.setAttribute('src', this.sanitize(value));
|
}
|
|
return node;
|
}
|
|
static formats(node) {
|
return ATTRIBUTES.reduce((formats, attribute) => {
|
if (node.hasAttribute(attribute)) {
|
formats[attribute] = node.getAttribute(attribute);
|
}
|
return formats;
|
}, {});
|
}
|
|
static sanitize(url) {
|
return Link.sanitize(url);
|
}
|
|
static value(node) {
|
return {
|
url: node.getAttribute('src'),
|
width: node.getAttribute('width'),
|
height: node.getAttribute('height'),
|
controls: node.getAttribute('controls'),
|
};
|
}
|
|
format(name, value) {
|
if (ATTRIBUTES.includes(name)) {
|
if (value) {
|
this.domNode.setAttribute(name, value);
|
} else {
|
this.domNode.removeAttribute(name);
|
}
|
} else {
|
super.format(name, value);
|
}
|
}
|
}
|
|
VideoBlot.blotName = 'video';
|
VideoBlot.className = 'ql-video';
|
VideoBlot.tagName = 'video';
|
|
// 添加不会被 sanitize 的标记
|
VideoBlot.sanitize = function(url) {
|
const sanitized = Link.sanitize(url);
|
return sanitized === Link.PROTOCOL_WHITELIST[0] ? 'about:blank' : sanitized;
|
};
|
|
export default VideoBlot;
|