vue-quill图片压缩模块使用方法答案

【问题标题】：How to use vue-quill image compressor modulevue-quill图片压缩模块使用方法
【发布时间】：2022-11-23 19:09:42
【问题描述】：

我在 vue-quill 中使用 BlotFormatter 模块。它正在工作。我也尝试添加图像压缩器模块并上传大图像，但它没有被压缩。我想我做错了什么。这是我将它包含在我的项目中的方式，

<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 = {
  name: "blotFormatter",
  module: BlotFormatter,
  options: {
    /* options */
  },
  imageCompress: {
    quality: 0.7, // default
    maxWidth: 1000, // default
    maxHeight: 1000, // default
    imageType: "image/jpeg", // default
    debug: true, // default
    suppressErrorLogging: false, // default
    insertIntoEditor: undefined, // default
  },
};
</script>

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

如果有人能指导我正确安装此模块，我将不胜感激。谢谢

【问题讨论】：

标签： javascript vue.js quill vue-quill-editor

【解决方案1】：

只需将模块放在一个数组中。将所有模块作为对象分开。

const modules = [
  {
    name: "ImageCompress",
    module: ImageCompress,
    options: {
      quality: 0.7, // default
      maxWidth: 1000, // default
      maxHeight: 1000, // default
      imageType: "image/jpeg", // default
      debug: true, // default
      suppressErrorLogging: false, // default
      insertIntoEditor: undefined, // default
    },
  },
  {
    name: "BlotFormatter",
    module: BlotFormatter,
    options: {},
  },
];const modules = [
  {
    name: "ImageCompress",
    module: ImageCompress,
    options: {
      quality: 0.7, // default
      maxWidth: 1000, // default
      maxHeight: 1000, // default
      imageType: "image/jpeg", // default
      debug: true, // default
      suppressErrorLogging: false, // default
      insertIntoEditor: undefined, // default
    },
  },
  {
    name: "BlotFormatter",
    module: BlotFormatter,
    options: {},
  },
];

【讨论】：