Vue-Quill-Editor富文本图片放大缩小imports of undefined

富文本的使用可以参考这里

我们正常的下载   npm i quill-image-resize-module -S

在页面上引入

import * as Quill from 'quill'
// 调整上传图片大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)

页面中的data配置

editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
              [{ script: 'sub' }, { script: 'super' }], // 上标/下标
              [{ indent: '-1' }, { indent: '+1' }], // 缩进
              [{ direction: 'rtl' }], // 文本方向
              [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              // [{ font: ['songti'] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ['clean'], // 清除文本格式
              ['image', 'video'] // 链接、图片、视频
            ],
            // 这是图片放大缩小的配置
            handlers: {
              'image': function(value) {
                if (value) { // value === true
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          },

此时你会发现你报错

按照官方例子步骤操作会报错：imports of undefined

按照报错调用栈，读了源码发现undefined本来是要指向quill的，看了一下quill是个对象，里面三个属性，这里试图将quill的属性挂到window上

网上找了很多解决方法都没用

正确的解决方法

我是放在main.js中的

import Quill from 'vue-quill-editor'

window.Quill = Quill.Quill
window.install = Quill.install
window.quillEditor = Quill.quillEditor
console.log(Quill)