vue-quill-editor显示文本、图片、视频，踩过的坑，比如register错，imports的错，还有module_9的错

报错图片：

一、先下载依赖
1、npm install vue-quill-editor --save
2、npm install quill --save
3、npm install quill-image-drop-module --save （图片可拖动）
4、npm install quill-image-resize-module --save （图片可缩放）

package.json中下载依赖的版本号
二、插件需要webpack的支持
在vue.config.js 中需要添加的代码
const webpack = require(‘webpack’)
module.exports = {
configureWebpack: {
plugins: [new webpack.ProvidePlugin({
‘window.Quill’: ‘quill/dist/quill.js’,
‘Quill’: ‘quill/dist/quill.js’
})]
}
}
三、在main.js中全局挂载使用
import VueQuillEditor from ‘vue-quill-editor’
import ‘quill/dist/quill.core.css’
import ‘quill/dist/quill.snow.css’
import ‘quill/dist/quill.bubble.css’
Vue.use(VueQuillEditor)

// 实现quill-editor编辑器拖拽上传图片
import * as Quill from ‘quill’
import { ImageDrop } from ‘quill-image-drop-module’
Quill.register(‘modules/imageDrop’, ImageDrop)

// 实现quill-editor编辑器调整图片尺寸
import ImageResize from ‘quill-image-resize-module’
Quill.register(‘modules/imageResize’, ImageResize)

四、在util文件下新建quill-video.js，主要是解决富文本编辑器中，将视频作为文件流传给后端，后端返回给前端的地址，在文本中显示不出视频，做的动作是下载，后翻看博看知道插件中自带一些弊端，需要将iframe换成video，插件中的源码不好修改，所以有了这个步骤：

import { Quill } from 'vue-quill-editor'

// 源码中是import直接倒入，这里要用Qill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')

const ATTRIBUTES = ['height', 'width']

class Video extends BlockEmbed {
  static create(value) {
    const node = super.create(value)
    // 添加video标签所需的属性
    node.setAttribute('controls', 'controls') // 控制播放器
    node.setAttribute('controlsList', 'nofullscreen') // 控制删除
    node.setAttribute('type', 'video/mp4')
    node.setAttribute('style', 'object-fit:fill;width:100%;')
    node.setAttribute('preload', 'auto')
    node.setAttribute('playsinline', 'true')
    node.setAttribute('x-webkit-airplay', 'allow')
    node.setAttribute('width', 'width')
    node.setAttribute('height', 'height')
    node.setAttribute('src', this.sanitize(value))
    return node
  }

  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute)
      }
      return formats
    }, {})
  }

  static sanitize(url) {
    return Link.sanitize(url)
  }

  static value(domNode) {
    return {
      url: domNode.getAttribute('src'),
      controls: domNode.getAttribute('controls'),
      width: domNode.getAttribute('width'),
      height: domNode.getAttribute('height')
    }
  }

  format(name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value)
      } else {
        this.domNode.removeAttribute(name)
      }
    } else {
      super.format(name, value)
    }
  }

  html() {
    const { video } = this.value()
    return `<a href="${video}">${video}</a>`
  }
}
Video.blotName = 'video'
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframe
export default Video