vue-quill-editor图片大小修改

vue-quill-editor相关文档：
https://github.com/surmon-china/vue-quill-editor
vue-quill-editor添加图片大小修改。
简单效果图：

image.png

1.安装

npm install quill-image-resize-module quill-image-drop-module --save

2.导入相关组件

import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

3.项目运行使用时，quill-image-resize-module插件报错imports如下：

image.png

解决方式：
找到项目的build/webpack.base.conf.js文件添加如下代码

const webpack = require('webpack')

plugins: [
   new webpack.ProvidePlugin({
       'window.Quill': 'quill/dist/quill.js',
       'Quill': 'quill/dist/quill.js'
 })
]

4.在editorOption添加如下代码

          history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            imageDrop: true,
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            }

完整的代码展示

参考文档：
https://blog.csdn.net/chanlingmai5374/article/details/88530706