video.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import { Quill } from 'vue-quill-editor'
  2. // 源码中是import直接倒入,这里要用Quill.import引入
  3. const BlockEmbed = Quill.import('blots/block/embed')
  4. const Link = Quill.import('formats/link')
  5. const ATTRIBUTES = ['height', 'width', 'src', 'poster']
  6. class Video extends BlockEmbed {
  7. static create (value) {
  8. const node = super.create(value.url)
  9. // 添加video标签所需的属性
  10. node.setAttribute('controls', 'controls')
  11. node.setAttribute('type', 'video/mp4')
  12. node.setAttribute('preload', 'auto')
  13. node.setAttribute('autopaly', 'false')
  14. node.setAttribute('src', this.sanitize(value.url))
  15. node.setAttribute('poster', this.sanitize(value.poster))
  16. return node
  17. }
  18. static formats (domNode) {
  19. return ATTRIBUTES.reduce((formats, attribute) => {
  20. if (domNode.hasAttribute(attribute)) {
  21. formats[attribute] = domNode.getAttribute(attribute)
  22. }
  23. return formats
  24. }, {})
  25. }
  26. static sanitize (url) {
  27. return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
  28. }
  29. static value (domNode) {
  30. return domNode.getAttribute('src')
  31. }
  32. format (name, value) {
  33. if (ATTRIBUTES.indexOf(name) > -1) {
  34. if (value) {
  35. this.domNode.setAttribute(name, value)
  36. } else {
  37. this.domNode.removeAttribute(name)
  38. }
  39. } else {
  40. super.format(name, value)
  41. }
  42. }
  43. html () {
  44. const { video } = this.value()
  45. return `<a href="${video}">${video}</a>`
  46. }
  47. }
  48. Video.blotName = 'video' // 这里不用改,楼主不用iframe,直接替换掉原来,如果需要也可以保留原来的,这里用个新的blot
  49. Video.className = 'ql-video'
  50. Video.tagName = 'video' // 用video标签替换iframe
  51. export default Video