Quill富文本编辑器-图片上传-可编辑图片大小 排版

Quill富文本编辑器上传图片，图片太大的话，展示出来，就会出现很多问题，比如横向滚动条，比如一张图片就占几屏幕，为了解决这些问题，如果在上传图片的时候就把图片编辑好大小，并且可以排版肯定更好，那么这里代码奉上。

安装quill

npm install vue-quill-editor --save

安装quill-image-resize-module -S

npm install quill-image-drop-module -S

vue.config.js中

module.exports = {configureWebpack: {plugins: [new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js',Quill: 'quill/dist/quill.js'})]},}

main.js中引入

import VueQuillEditor from 'vue-quill-editor'//引入富文本编辑器编辑Vue.use(VueQuillEditor)

使用富文本的组件中：

HTML：

<!-- 富文本框 --><div class="editor" ref="editor" :style="styles"></div><!-- 图片上传器 --><el-upload:action="uploadUrl":before-upload="handleBeforeUpload":on-success="handleUploadSuccess":on-error="handleUploadError"name="file":show-file-list="false":headers="headers"style="display: none"ref="upload"v-if="this.type == 'url'"></el-upload>

js：

import Quill from "quill";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";import { getToken } from "@/utils/auth";import imageResize from 'quill-image-resize-module';//引入图片编辑组件Quill.register('modules/imageResize',imageResize);//富文本实现图片编辑功能export default {data() {return {uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址headers: {Authorization: "Bearer " + getToken()},Quill: null,currentValue: "",options: {theme: "snow",bounds: document.body,debug: "warn",modules: {// 工具栏配置toolbar: {container:[["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线["blockquote", "code-block"],// 引用 代码块[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表[{ indent: "-1" }, { indent: "+1" }], // 缩进[{ size: ["small", false, "large", "huge"] }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["link", "image"] // 链接、图片、视频],},imageResize: {//控制图片编辑的，实现功能就是这一段代码displayStyles: {backgroundColor: "black",border: "none",color: "white",},modules: ["Resize", "DisplaySize", "Toolbar"],},},placeholder: "请输入内容",readOnly: this.readOnly,},};},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 (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);}});}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);});},// 上传前校检格式和大小handleBeforeUpload(file) {console.log(file,'filefilefilefile');let regArr = ['.gif','.jpg','.jpeg','.png']let lastName = file.name.slice(file.name.indexOf('.'))if (regArr.indexOf(lastName)==-1) {this.$message.error(`仅支持.gif/.jpg/.jpeg/.png格式!`);return false;}// 校检文件大小if (this.fileSize) {const isLt = file.size / 1024 / 1024 < this.fileSize;if (!isLt) {this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);return false;}}return true;},handleUploadSuccess(res, file) {// 获取富文本组件实例let quill = this.Quill;// 如果上传成功if (res.code == 200) {// 获取光标所在位置let length = quill.getSelection().index;// 插入图片 res.url为服务器返回的图片地址quill.insertEmbed(length, "image", res.data.url);// 调整光标到最后quill.setSelection(length + 1);} else {this.$message.error("图片插入失败");}},handleUploadError() {this.$message.error("图片插入失败");},}}