解决vue-quill-editor使用 quill-image-resize-module imports错误

一、安装所需插件（所有必要的）

1、安装quill

npm install quill --save

2、安装依赖

npm install quill-image-drop-module -S
npm install quill-image-resize-module -S
或者
yarn add quill-image-drop-module
yarn add quill-image-resize-module

二、引入和注册

// quill编辑器基本使用所需的import
import { quillEditor } from 'vue-quill-editor'
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme

// 图片大小缩放
import Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module' // 图片拖动组件引用
import ImageResize from 'quill-image-resize-module' // 图片缩放组件引用
Quill.register('modules/imageDrop', ImageDrop) // 注册
Quill.register('modules/imageResize', ImageResize) // 注册

备注：这里导入quill-image-resize-module会报错，解决方案有两种，可以都试试：

①如果是vue cli3，在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'
			})
		],
  	}
}

②在build文件夹下找到 webpack.dev.conf.js 和 webpack.dev.prod.js 文件，在其中 plugins 中添加

// 富文本图片处理
new webpack.ProvidePlugin({
     'window.Quill': 'quill/dist/quill.js',
     'Quill': 'quill/dist/quill.js'
}),

三、修改编辑器 editorOption 中的配置

editorOption: {
    modules: {
        // 新增下面
        imageDrop: true, // 拖动加载图片组件。
        imageResize: { //调整大小组件。
            displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
        }
    }
}