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