How to use vue-quill image compressor module-CodePudding

I'm using the BlotFormatter module with vue-quill. And it is working. I tried to add the image compressor module too and upload a large image but it is not being compressed. I think I have done something wrong. This is the way I included it in my project,

<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>

Really appreciate it if somebody could guide me to install this module properly. Thanks

CodePudding user response：

Just put the modules inside an array.Separate all modules as objects.

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: {},
  },
];