问题：因为富文本编辑器上传图片后，是转成base64保存进数据库，图片过大时参数会很长。
前提条件：安装了quill富文本编辑器。npm install quill@1.3.6
1，安装好后在页面直接引入quill
import Quill from "quill";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";
2，先隐藏一个element的上传图片的组件
<el-upload:action="uploadUrl":on-success="handleUploadSuccess":on-error="handleUploadError"name="file":show-file-list="false":headers="headers"style="display: none"ref="upload"v-if="this.uploadUrl"></el-upload>
3，生成富文本编辑器
生成位置
<div class="editor" ref="editor" :style="styles"></div>
参数
uploadUrl：process.env.VUE_APP_BASE_API+'/file/upload',//上传路径Quill: null,//quill实例currentValue: "",options: {theme: "snow",//主题bounds: document.body,debug: "warn",modules: {// 工具栏配置toolbar: [["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"] // 链接、图片],},placeholder: "请输入内容",readOnly: this.readOnly,//只读},
生成
init() {const editor = this.$refs.editor;//dom元素//创建this.Quill = new Quill(editor, this.options);// 定义图片上传事件if (this.uploadUrl) {let toolbar = this.Quill.getModule("toolbar");toolbar.addHandler("image", (value) => {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;})},
上传图片成功后，显示图片在富文本里面
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("图片插入失败");}},
