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

图片描述

图片描述

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

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

阅读 19.3k
8 个回答

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了。

我也遇到了。。。。。

新手上路,请多包涵

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

clipboard.png

新手上路,请多包涵
new webpack.ProvidePlugin({
    'window.Quill': 'quill/dist/quill.js',
    'Quill': 'quill/dist/quill.js'
})
新手上路,请多包涵

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',
            })
        ]
    },
}
推荐问题
宣传栏