zxl
22 小时以前 059f9068163e2e48b5d802db93e171991dd6bce5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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;