如何正确配置vue-quill的image compressor图片压缩模块？

开发者阿泽

2026-8-22

解决Vue Quill中quill-image-compress模块不生效的问题

你的配置核心问题是modules对象结构错误，Quill要求每个模块以独立键值对的形式注册，不能将多个模块嵌套在同一个配置项中。以下是正确的配置方案：

1. 确认依赖安装

如果尚未安装相关模块，执行以下命令：

npm install quill-image-compress quill-blot-formatter --save
# 或使用yarn
yarn add quill-image-compress quill-blot-formatter

2. 正确的组件配置

修改<script setup>中的modules配置，将BlotFormatter和ImageCompress作为两个独立模块注册：

<script setup>
import { QuillEditor } from "@vueup/vue-quill";
import ImageCompress from "quill-image-compress";
import BlotFormatter from "quill-blot-formatter";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

const modules = {
  // 独立注册BlotFormatter模块
  blotFormatter: {
    module: BlotFormatter,
    options: {
      // 这里添加BlotFormatter的自定义配置，比如允许操作的元素类型
      // allowedBlots: [ImageBlot]
    }
  },
  // 独立注册ImageCompress模块
  imageCompress: {
    module: ImageCompress,
    options: {
      quality: 0.7,
      maxWidth: 1000,
      maxHeight: 1000,
      imageType: "image/jpeg",
      debug: true,
      suppressErrorLogging: false,
      insertIntoEditor: undefined
    }
  }
};
</script>

<template>
  <QuillEditor
    ref="quillEditorRef"
    v-model:content="articleForm.description"
    theme="snow"
    toolbar="full"
    contentType="html"
    :modules="modules"
  />
</template>

3. 关键说明

Quill的modules对象中，每个键对应模块名称，值是包含module（模块类）和options（配置项）的对象。你之前的写法将两个模块配置合并，导致Quill无法识别imageCompress模块，因此未触发压缩逻辑。
开启debug: true后，可在浏览器控制台查看压缩过程日志，验证是否触发压缩。