vue-quill-editor 的quill-image-resize-module 改变插入图片大小模块引入报错问题

Question

一旦引入quill-image-resize-module这个模块后就会报上图的imports的错，是这个模块本身有问题吗？

有什么推荐的富文本编辑器？最要可以实现 拖动插入图片，改变插入图片的大小，不要百度的富文本编辑器，需要搭配vue用，现在用的vue-quill-editor这个编辑器就是quill-image-resize-module 这个模块报错很蛋疼

Answer 1

Managed to get v3.0 and the image-drop module working with webpack

webpack.config.js:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
      loader: 'babel-loader',
      query: {...}
    }
  ]
}
plugins: [
  new webpack.ProvidePlugin({
    'window.Quill': 'quill'
  })
]

Component.js:

import {ImageDrop} from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'

Quill.register('modules/imageResize', ImageResize)
Quill.register('modules/imageDrop', ImageDrop)

const quillModules = {
  ...
  imageDrop: true,
  imageResize: {}
}

You can also import the minified file from each module instead of transforming them with babel, but the image-drop module registers itself with Quill so you have to remove that.

最后在打包的时候，发现ImageDrop这个模块压缩又报错了。
最后干脆不用这个ImageDrop了。

Answer 2

我也遇到了。。。。。

Answer 3

您好，我也是用quill 的 imageDrop 压缩的时候出错 ，请问怎么配置，能指导一下吗？

Answer 4

我也遇到这个坑了(drop插件打包报错问题),麻烦楼主大佬不吝赐教
https://segmentfault.com/q/10...

Answer 5

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

Answer 6

vue-cli 3.x 以上, 在 vue.conf.js 中,以下2种任选一种配置

方法一：

module.exports = {
    chainWebpack: config => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            'window.Quill': 'quill/dist/quill.js',
           'Quill': 'quill/dist/quill.js'
     }]);
    },
    
}

方法二：

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

Answer 7

同求答案。。

Answer 8

ERROR Invalid options in vue.config.js: "plugins" is not allowed

这是为啥哦