quill富文本插件quill-image-resize-module 改变插入图片大小模块引入报错问题

最新推荐文章于 2025-04-08 14:41:03 发布

Best_卡卡

最新推荐文章于 2025-04-08 14:41:03 发布

阅读量7.3k

点赞数 8

分类专栏： vue.js插件库文章标签： vue.js webpack

本文链接：https://blog.csdn.net/weixin_43909743/article/details/121285048

版权

vue.js插件库专栏收录该内容

10 篇文章

订阅专栏

使用

使用quill-image-resize-module实现富文本中图片大小可修改的操作

安装：

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

使用：

import Quill from 'quill';
import { ImageResize } from 'quill-image-resize-module';

Quill.register('modules/imageResize', ImageResize);

const quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        imageResize: {   //添加
            displayStyles: {
                 backgroundColor: 'black',
                 border: 'none',
                 color: 'white'
             },
             modules: [ 'Resize', 'DisplaySize' ]
          },
    }
});

这个时候控制台会出现错误:引入quill-image-resize-module的报错“Cannot read property ‘imports’ of undefined”

Cannot read property 'imports' of undefined"

Failed to mount component: template or render function not defined.

Cannot read property 'registerof undefined’

解决方案

在build文件夹下找到webpack.base.conf.js。

module.exports = {
   plugins: [
           new webpack.ProvidePlugin({
       		// 在这儿添加下面两行
               'window.Quill': 'quill/dist/quill.js',
               'Quill': 'quill/dist/quill.js'
       })
   ]
}

基于vue-cli创建，找不到webpack.base.conf.js；在vue.config.js中设置

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