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

五、在组件中的具体使用：
template中的代码：

<el-form-item label="文章内容" prop="content">
              <quill-editor ref="quillEditor" :options="contOption" @change="contEditorChange($event)" />
 </el-form-item>

script中的代码：

<script>
import { upload } from '@/api/common'  //这是后端提供的接口主要是为了拿地址回显
import Video from '@/utils/quill-video'
import { quillEditor, Quill } from 'vue-quill-editor'
var Font = Quill.import('attributors/style/font')
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif']
Font.whitelist = fonts
Quill.register(Font, true)
// 自定义字号的大小
var fontSizeStyle = Quill.import('attributors/style/size')
var sizes = ['10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '32px', '48px']
fontSizeStyle.whitelist = sizes
Quill.register(fontSizeStyle, true)
Quill.register(Video, true)
const richTextModules = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  // ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  // [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ 'direction': 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: sizes }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: fonts }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
]

export default {
  name: 'AddContent',
  components: {
    quillEditor
  },
  data() {
    var than_ = this
    var customFun = {
      image: function image() {
        // 上传图片
        const self = this
        let fileInput = this.container.querySelector('input.ql-image[type=file]')
        const accept = 'image/png, image/jpg, image/gif, image/jpeg'
        if (fileInput === null) {
          fileInput = document.createElement('input')
          fileInput.setAttribute('type', 'file')
          fileInput.setAttribute('accept', accept)
          fileInput.classList.add('ql-image')
          fileInput.addEventListener('change', function() {
            const file = fileInput.files[0]
            fileInput.value = ''
            const name = (file.name).substring((file.name).lastIndexOf('.') + 1, (file.name).length)
            if (name !== 'png' && name !== 'jpg' && name !== 'gif' && name !== 'jpeg') {
              than_.$message.closeAll()
              than_.$message.warning('文件格式错误，请重新上传')
            } else {
              const par = new FormData()
              par.append('file', file)
             //这边是上传图片的接口
              upload(par).then(res => {
                if (res.data.length) {
                //定位到光标位置
                  const length = self.quill.getSelection(true).index
                  self.quill.insertEmbed(length, 'image', res.data[0])
                  self.quill.setSelection(length + 1)
                } else {
                  than_.$message.closeAll()
                  than_.$message.error('上传文件失败')
                }
              })
            }
          })
          this.container.appendChild(fileInput)
        }
        fileInput.click()
      },
      video: function video() {
        // 上传视频
        const self = this
        let fileInput = this.container.querySelector('input.ql-video[type=file]')
        const accept = '.mp4'
        if (fileInput === null) {
          fileInput = document.createElement('input')
          fileInput.setAttribute('type', 'file')
          fileInput.setAttribute('accept', accept) // 文件格式
          fileInput.classList.add('ql-video')
          // 监听选择文件
          fileInput.addEventListener('change', function() {
            const file = fileInput.files[0]
            fileInput.value = ''
            const name = (file.name).substring((file.name).lastIndexOf('.') + 1, (file.name).length)
            if (name !== 'mp4') {
              than_.$message.closeAll()
              than_.$message.warning('文件格式错误，请重新上传')
            } else {
              const par = new FormData()
              par.append('file', file)
              //上传视频的接口
              upload(par).then(res => {
                if (res.data.length) {
                  const length = self.quill.getSelection(true).index
                  self.quill.insertEmbed(length, 'video', res.data[0])
                  self.quill.setSelection(length + 1)
                } else {
                  console.log('失败')
                  than_.$message.closeAll()
                  than_.$message.error('上传文件失败')
                }
              }).catch((err) => {
                console.log(err)
                this.$message({
                  message: '视频上传失败，请重试',
                  type: 'error',
                  center: true,
                  offset: 100
                })
              })
            }
          })
          this.container.appendChild(fileInput)
        }
        fileInput.click()
      }
    }
    return {
      ruleForm: {
        content: ''
      },
      contOption: {
        placeholder: '',
        theme: 'snow',
        modules: {
          clipboard: {
            matchers: [[Node.ELEMENT_NODE, this.HandleCustomMatcher]]
          },
          toolbar: {
            container: richTextModules,
            handlers: customFun
          }
        }
      },
      actionType: 0,
      rules: {
        content: [
          { required: true, message: '请输入内容', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    contEditorChange(val) {
      if (val.html) {
        val.html = val.html.replace(/<p class='ql-align-center'><br><\/p>/g, '')
      }
      this.ruleForm.content = val.html
      if (this.ruleForm.content) {
        this.$refs['ruleForm'].clearValidate('content')
      }
    },
    HandleCustomMatcher(node, Delta) {
      const ops = []
      Delta.ops.forEach(op => {
        if (op.insert && typeof op.insert === 'string') {
          ops.push({
            insert: op.insert
          })
        }
      })
      Delta.ops = ops
      return Delta
    }
  }
}
</script>

css中的代码：
::v-deep .quill-editor {
line-height: normal !important;
margin-left:20px;
.ql-container {
height: 300px;
}
.ql-snow.ql-toolbar input.ql-video[type=file],
.ql-snow .ql-toolbar input.ql-video[type=file] {
display: none;
}
.ql-snow .ql-tooltip {
left: -90px !important;
&::before {
content: “请输入链接地址:”;
}
a.ql-action::after {
content: ‘修改’;
}
a.ql-remove::before {
content: ‘删除’;
}
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
content: ‘保存’;
}

.ql-snow .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-header {
    width: 65px;
    .ql-picker-label::before, .ql-picker-item::before {
        content: '文本';
    }
    .ql-picker-label[data-value="1"]::before, .ql-picker-item[data-value="1"]::before {
        content: '标题1';
    }
    .ql-picker-label[data-value="2"]::before, .ql-picker-item[data-value="2"]::before {
        content: '标题2';
    }
    .ql-picker-label[data-value="3"]::before, .ql-picker-item[data-value="3"]::before {
        content: '标题3';
    }
    .ql-picker-label[data-value="4"]::before, .ql-picker-item[data-value="4"]::before {
        content: '标题4';
    }
    .ql-picker-label[data-value="5"]::before, .ql-picker-item[data-value="5"]::before {
        content: '标题5';
    }
    .ql-picker-label[data-value="6"]::before, .ql-picker-item[data-value="6"]::before {
        content: '标题6';
    }
}

.ql-snow .ql-picker.ql-size {
    width: 60px;
    .ql-picker-label::before, .ql-picker-item::before {
        content: '16px';
    }
    .ql-picker-label[data-value="10px"]::before, .ql-picker-item[data-value="10px"]::before {
        content: '10px';
    }
    .ql-picker-label[data-value="12px"]::before, .ql-picker-item[data-value="12px"]::before {
        content: '12px';
    }
    .ql-picker-label[data-value="14px"]::before, .ql-picker-item[data-value="14px"]::before {
        content: '14px';
    }
    .ql-picker-label[data-value="16px"]::before, .ql-picker-item[data-value="16px"]::before {
        content: '16px';
    }
    .ql-picker-label[data-value="18px"]::before, .ql-picker-item[data-value="18px"]::before {
        content: '18px';
    }
    .ql-picker-label[data-value="20px"]::before, .ql-picker-item[data-value="20px"]::before {
        content: '20px';
    }
    .ql-picker-label[data-value="22px"]::before, .ql-picker-item[data-value="22px"]::before {
        content: '22px';
    }
    .ql-picker-label[data-value="24px"]::before, .ql-picker-item[data-value="24px"]::before {
        content: '24px';
    }
    .ql-picker-label[data-value="26px"]::before, .ql-picker-item[data-value="26px"]::before {
        content: '26px';
    }
    .ql-picker-label[data-value="32px"]::before, .ql-picker-item[data-value="32px"]::before {
        content: '32px';
    }
    .ql-picker-label[data-value="48px"]::before, .ql-picker-item[data-value="48px"]::before {
        content: '48px';
    }
}
.ql-editor {
    .ql-size-10px {
        font-size: 10px;
    }
    .ql-size-12px {
        font-size: 12px;
    }
    .ql-size-14px {
        font-size: 14px;
    }
    .ql-size-16px {
        font-size: 16px;
    }
    .ql-size-18px {
        font-size: 18px;
    }
    .ql-size-20px {
        font-size: 20px;
    }
    .ql-size-22px {
        font-size: 22px;
    }
    .ql-size-24px {
        font-size: 24px;
    }
    .ql-size-26px {
        font-size: 26px;
    }
    .ql-size-32px {
        font-size: 32px;
    }
    .ql-size-48px {
        font-size: 48px;
    }
}

.ql-snow .ql-picker.ql-font {
    width: auto;
    .ql-picker-label {
        box-sizing: border-box;
        padding-right: 20px;
    }
    .ql-picker-label[data-value=SimSun]::before, .ql-picker-item[data-value=SimSun]::before {
        content: "宋体";
        font-family: "SimSun" !important;
    }
    .ql-picker-label[data-value=SimHei]::before, .ql-picker-item[data-value=SimHei]::before {
        content: "黑体";
        font-family: "SimHei" !important;
    }
    .ql-picker-label[data-value=Microsoft-YaHei]::before, .ql-picker-item[data-value=Microsoft-YaHei]::before {
        content: "微软雅黑" !important;
        font-family: "Microsoft YaHei";
    }
    .ql-picker-label[data-value=KaiTi]::before, .ql-picker-item[data-value=KaiTi]::before {
        content: "楷体";
        font-family: "KaiTi"!important;
    }
    .ql-picker-label[data-value=FangSong]::before, .ql-picker-item[data-value=FangSong]::before {
        content: "仿宋";
        font-family: "FangSong" !important;
    }
    .ql-picker-label[data-value=Arial]::before, .ql-picker-item[data-value=Arial]::before {
        content: "Arial";
        font-family: "Arial" !important;
    }
    .ql-picker-label[data-value=Times-New-Roman]::before, .ql-picker-item[data-value=Times-New-Roman]::before {
        content: "Times New Roman";
        font-family: "Times New Roman" !important;
    }
    .ql-picker-label[data-value=sans-serif]::before, .ql-picker-item[data-value=sans-serif]::before {
        content: "sans-serif";
        font-family: "sans-serif" !important;
    }
}
.ql-editor {
    font-family: "SimSun" !important;
    .ql-font-SimSun {
        font-family: "SimSun" !important;
    }
    .ql-font-SimHei {
        font-family: "SimHei" !important;
    }
    .ql-font-Microsoft-YaHei {
        font-family: "Microsoft YaHei" !important;
    }
    .ql-font-KaiTi {
        font-family: "KaiTi" !important;
    }
    .ql-font-FangSong {
        font-family: "FangSong" !important;
    }
    .ql-font-Arial {
        font-family: "Arial" !important;
    }
    .ql-font-Times-New-Roman {
        font-family: "Times New Roman" !important;
    }
    .ql-font-sans-serif {
        font-family: "sans-serif" !important;
    }
}

}

// 富文本编辑器-回显
::v-deep .rich_text_show_page {
.ql-align-center {
text-align: center;
}
.ql-align-right {
text-align: right;
}
.ql-size-10px {
font-size: 10px;
}
.ql-size-12px {
font-size: 12px;
}
.ql-size-14px {
font-size: 14px;
}
.ql-size-16px {
font-size: 16px;
}
.ql-size-18px {
font-size: 18px;
}
.ql-size-20px {
font-size: 20px;
}
.ql-size-22px {
font-size: 22px;
}
.ql-size-24px {
font-size: 24px;
}
.ql-size-26px {
font-size: 26px;
}
.ql-size-32px {
font-size: 32px;
}
.ql-size-48px {
font-size: 48px;
}
font-family: “SimSun” !important;
.ql-font-SimSun {
font-family: “SimSun” !important;
}
.ql-font-SimHei {
font-family: “SimHei” !important;
}
.ql-font-Microsoft-YaHei {
font-family: “Microsoft YaHei” !important;
}
.ql-font-KaiTi {
font-family: “KaiTi” !important;
}
.ql-font-FangSong {
font-family: “FangSong” !important;
}
.ql-font-Arial {
font-family: “Arial” !important;
}
.ql-font-Times-New-Roman {
font-family: “Times New Roman” !important;
}
.ql-font-sans-serif {
font-family: “sans-serif” !important;
}
}
六、最终显示效果：
因为项目未上线，不能展示全部，所以得打码，哈哈哈哈哈哈~