vue-quill-editor图片缩放处理

1.npm安装插件

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.工具栏配置

		editorOption: {
    //placeholder: "请输入文本内容12314",
    modules: {
      imageDrop: true, //图片拖拽
      imageResize: {
        displayStyles: {// 放大缩小
          backgroundColor: "black",
          border: "none",
          color: "white",
        },
        modules: ["Resize", "DisplaySize", "Toolbar"],
      },
      clipboard: {
        matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],// 粘贴版，处理粘贴时候带图片
      },
      toolbar: {
        container: [
          ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
          ["blockquote"], //引用，代码块
          [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
          [{ list: "ordered" }, { list: "bullet" }], //列表
          [{ align: [] }],
          [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
          ["link", "image"],
        ],
      },
    },
    theme: "snow",
  },

    },
    theme:'snow'
  },

4.报错

5.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'
    })
]

}

我这里的配置是这样的，你们如果使用的话按情况来

		module.exports = Object.assign(multipage.create('./src', './', '-'), {
// custom config
chainWebpack: config => {
	config.resolve.alias
  .set("Common", resolve("src/common"))
  .set("Http", resolve("src/common/base/http"))
  .set("Conf", resolve("src/common/config"))
},
configureWebpack: {
plugins: [
    new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
    })
]
}
})

设置之后报错问题就解决了，编辑器就可以缩放图片了