Quill.js 2.0.0rc版本image-resize插件适配及导入问题咨询

安全阿岳

2026-6-29

Quill 2.0.0rc 中使用 image-resize 插件的解决方案

针对你升级到 Quill 2.0.0rc 后无法导入 image-resize 插件的问题，核心原因是旧版插件与 Quill 2.x 的模块化架构不兼容，以下是可落地的解决步骤：

1. 安装适配 Quill 2.x 的插件版本

旧版 quill-image-resize-module 不支持 Quill 2.x，需要安装适配的替代包，推荐使用 quill-image-resize-module-ts：

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

2. 修改初始化代码（ES 模块方式）

Quill 2.x 采用 ES 模块规范，需要手动注册插件模块后再配置使用：

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

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

const quill = new Quill('#editor', {
    modules: {
        imageResize: {
          displaySize: true
        },
        toolbar: [
          [{ header: [1, 2, 3, false] }],
          ['bold', 'italic', 'underline'],
          ['image','link', 'video']
        ]
    },
    placeholder: 'Write something...',
    readOnly: false,
    theme: 'snow'
});

3. CDN 方式适配（非打包环境）

如果直接用 CDN 引入资源，需要加载适配 Quill 2.x 的插件版本，示例：

<!-- 引入 Quill 2.0.0rc CDN -->
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.snow.css" rel="stylesheet">

<!-- 引入适配的 image-resize 插件 CDN -->
<script src="https://cdn.jsdelivr.net/npm/quill-image-resize-module-ts@3.0.0/dist/quill-image-resize-module-ts.js"></script>

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

// 初始化编辑器
const quill = new Quill('#editor', {
    // 配置同上述示例
});
</script>