If you use the quill rich text plug-in according to the framework, but cannot change the size of the uploaded image, you need to download a third-party plug-in quill-image-resize-module
to achieve this.
1. Add in vue.config.js
module.exports = { ... configureWebpack:{ ... plugins:[ new webpack.ProvidePlugin({ 'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js' }), ] } }
2. Download the plug-in
npm install quill-image-drop-module --save npm i quill-image-resize-module --save npm install quill-image-extend-module --save
3.Introduce plug-ins into the page
//Rich text image dragging and resizing plug-in // quill-image-resize-module This plug-in is used to control the size of uploaded images import ImageResize from 'quill-image-resize-module'; import { ImageDrop } from 'quill-image-drop-module'; import { ImageExtend } from 'quill-image-extend-module'; Quill.register('modules/imageResize', ImageResize); Quill.register('modules/imageDrop', ImageDrop); Quill.register('modules/imageExtend', ImageExtend);
4. Add in the page code
options:{ ... modules:{ imageDrop: true, //Picture drag and drop imageResize: { // Image scaling ratio displayStyles: { backgroundColor: 'black', border: 'none', color: 'white' }, modules: [ 'Resize', 'DisplaySize', 'Toolbar' ] }, } }
The following is the complete code
<template> <div> <el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" name="multiFile" :show-file-list="false" style="display: none" ref="upload" v-if="this.type == 'url'"> </el-upload> <div class="editor" ref="editor" :style="styles" @paste="handlePaste($event)"></div> </div> </template> <script> import Quill from "quill"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; // Rich text image drag and resize plug-in // quill-image-resize-module This plug-in is used to control the size of uploaded images import ImageResize from 'quill-image-resize-module'; import { ImageDrop } from 'quill-image-drop-module'; import { ImageExtend } from 'quill-image-extend-module'; Quill.register('modules/imageResize', ImageResize); Quill.register('modules/imageDrop', ImageDrop); Quill.register('modules/imageExtend', ImageExtend); export default { name: "Editor", props: { /* Editor content */ value: { type: String, default: "", }, /* high */ height: { type: Number, default: null, }, /* Minimum height */ minHeight: { type: Number, default: null, }, /* read only */ readOnly: { type: Boolean, default: false, }, /* Upload file size limit (MB) */ fileSize: { type: Number, default: 5, }, /* Type (base64 format, url format) */ type: { type: String, default: "url", } }, data() { return { uploadUrl: process.env.VUE_APP_BASE_API + "/upload", // Uploaded image server address Quill: null, currentValue: "", options: { theme: "snow", bounds: document.body, debug: "warn", modules: { imageDrop: true, //Picture drag and drop imageResize: { // Image scaling ratio displayStyles: { backgroundColor: 'black', border: 'none', color: 'white' }, modules: [ 'Resize', 'DisplaySize', 'Toolbar' ] }, // Toolbar configuration toolbar: [ ["bold", "italic", "underline", "strike"], // bold italic underline strikethrough ["blockquote", "code-block"], // quote code block [{ list: "ordered" }, { list: "bullet" }], // Ordered and unordered lists [{ indent: "-1" }, { indent: " + 1" }], // indent [{ size: ["small", false, "large", "huge"] }], // font size [{ header: [1, 2, 3, 4, 5, 6, false] }], // header [{ color: [] }, { background: [] }], // font color, font background color [{ align: [] }], // Alignment ["clean"], // Clear text format ["link", "image", "video"] // Links, pictures, videos ], }, placeholder: "Please enter content", readOnly: this.readOnly, }, }; }, computed: { styles() { let style = {}; if (this.minHeight) { style.minHeight = `${this.minHeight}px`; } if (this.height) { style.height = `${this.height}px`; } return style; }, }, watch: { value: { handler(val) { if (val !== this.currentValue) { this.currentValue = val === null ? "" : val; if (this.Quill) { this.Quill.pasteHTML(this.currentValue); } } }, immediate: true, }, }, mounted() { this.init(); }, beforeDestroy() { this.Quill = null; }, methods: { init() { const editor = this.$refs.editor; this.Quill = new Quill(editor, this.options); // If the upload address is set, customize the image upload event if (this.type == 'url') { let toolbar = this.Quill.getModule("toolbar"); toolbar.addHandler("image", (value) => { this.uploadType = "image"; if (value) { this.$refs.upload.$children[0].$refs.input.click(); } else { this.quill.format("image", false); } }); toolbar.addHandler("video", (value) => { this.uploadType = "video"; if (value) { this.$refs.upload.$children[0].$refs.input.click(); } else { this.quill.format("video", false); } }); } this.Quill.pasteHTML(this.currentValue); this.Quill.on("text-change", (delta, oldDelta, source) => { const html = this.$refs.editor.children[0].innerHTML; const text = this.Quill.getText(); const quill = this.Quill; this.currentValue = html; this.$emit("input", html); this.$emit("on-change", { html, text, quill }); }); this.Quill.on("text-change", (delta, oldDelta, source) => { this.$emit("on-text-change", delta, oldDelta, source); }); this.Quill.on("selection-change", (range, oldRange, source) => { this.$emit("on-selection-change", range, oldRange, source); }); this.Quill.on("editor-change", (eventName, ...args) => { this.$emit("on-editor-change", eventName, ...args); }); }, // Check format and size before uploading handleBeforeUpload(file) { const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"]; const isJPG = type.includes(file.type); // Check file format if (!isJPG) { this.$message.error(`Picture format error!`); return false; } // Check file size if (this.fileSize) { const isLt = file.size / 1024 / 1024 <this.fileSize; if (!isLt) { this.$message.error(`Uploaded file size cannot exceed ${this.fileSize} MB!`); return false; } } return true; }, handleUploadSuccess(res, file) { // If the upload is successful if (res.code == 200) { // Get rich text component instance let quill = this.Quill; // Get the cursor position let length = quill.getSelection().index; //Insert image res.url is the image address returned by the server quill.insertEmbed(length, "image", res.msg); //Adjust the cursor to the end quill.setSelection(length + 1); } else { this.$message.error("Picture insertion failed"); } }, handleUploadError() { this.$message.error("Picture insertion failed"); }, }, }; </script> <style> .editor, .ql-toolbar { white-space: pre-wrap !important; line-height: normal !important; } .quill-img { display: none; } .ql-snow .ql-tooltip[data-mode="link"]::before { content: "Please enter the link address:"; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; content: "Save"; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode="video"]::before { content: "Please enter the video address:"; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "14px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { content: "10px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { content: "18px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { content: "32px"; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: "text"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: "Title 1"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: "Title 2"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: "Title 3"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: "Title 4"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { content: "Title 5"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { content: "Title 6"; } .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: "Standard font"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { content: "serif font"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { content: "monospaced font"; }</style>