如何在Quill中添加imageResize模块？导入报错求助

报错原因 #

出现quill Cannot import modules/imageResize. Are you sure it was registered?是因为Quill核心包不内置图片缩放模块，需额外安装并正确注册对应模块。

正确添加步骤 #

1. 安装依赖 #

npm/yarn 方式

npm install quill-image-resize-module --save
# 或
yarn add quill-image-resize-module

CDN 方式

先加载Quill核心，再加载imageResize模块脚本：

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="https://unpkg.com/quill-image-resize-module@3.0.0/dist/quill-image-resize-module.min.js"></script>

2. 注册并初始化模块 #

ES模块环境（webpack/vite等）

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

// 注册模块
Quill.register('modules/imageResize', ImageResize);

// 初始化Quill
const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    imageResize: {
      // 可选配置：自定义样式、功能模块
      displayStyles: {
        backgroundColor: '#333',
        color: '#fff'
      },
      modules: ['Resize', 'DisplaySize', 'Toolbar']
    },
    toolbar: [['image']] // 确保工具栏包含插入图片按钮
  }
});

CDN全局环境

// 注册模块（CDN加载后模块挂载在window下）
Quill.register('modules/imageResize', window.QuillImageResizeModule.default);

// 初始化Quill
const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    imageResize: {},
    toolbar: [['image']]
  }
});

常见排查点 #

• 版本兼容：quill-image-resize-module@3.x适配Quill 1.x，若用Quill 2.x需使用quill-image-resize-module-v2
• 加载顺序：必须先加载Quill核心，再加载imageResize模块
• 注册语句：确保模块名modules/imageResize拼写无误
• webpack环境：需配置ProvidePlugin避免路径错误：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      Quill: 'quill'
    })
  ]
};

内容的提问来源于stack exchange，提问作者guibs dod