vue-quill-editor富文本编辑器自定义上传图片功能

本文主要是介绍vue-quill-editor富文本编辑器自定义上传图片功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题描述：vue-quill-editor富文本默认上传图片是将图片转换成base64进行存储，字段过长；然后进行自定义上传图片，只保存图片路径，减少服务器压力
解决思路：
1、先创建一个上传图片的组件（我使用的是element-ui的el-upload），将该组件进行隐藏
2、点击富文本插入图片的按钮时转换成点击上传插件，进行图片上传
3、上传成功后后端返回图片路径，将图片路径处理后插入到光标在富文本中的位置
解决步骤：
1、组件添加，隐藏该组件

     <el-uploadstyle="display: none"action="你上传图片的接口地址"list-type="picture-card":on-success="uploadSuccess"><i class="el-icon-plus"></i></el-upload>

2、点击插入图片时进行上传图片插件点击操作，主要是handlers里面的内容

editorOption: {placeholder: "请输入...",modules: {toolbar: {container: [["bold", "italic", "underline", "strike"],[{ color: [] }, { background: [] }],["link", "image"],["blockquote", "code-block"],[{ align: [] }],[{ list: "ordered" }, { list: "bullet" }],[{ script: "sub" }, { script: "super" }],[{ header: 1 }, { header: 2 }],[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ size: ["small", false, "large", "huge"] }],[{ font: [] }],[{ indent: "-1" }, { indent: "+1" }],],handlers: {image: function (value) {if (value) {// 调用iview图片上传//console.log(value);document.querySelector(".el-upload.el-upload--picture-card").click();} else {// this.quill.format("image", false);}},},},imageResize: {displayStyles: {backgroundColor: "black",border: "none",color: "white",},modules: ["Resize", "DisplaySize", "Toolbar"],},},

3、根据图片给上传成功后返回的路径进行路径处理

// 上传成功uploadSuccess(res) {//我这里返回的是图片路径，没有加域名，处理一下即可let url = "服务器域名" + res.message;// 获取富文本组件实例let quill = this.$refs.myQuillEditor.quill;// 如果上传成功if (res) {// 获取光标所在位置let length = quill.getSelection().index;// 插入图片quill.insertEmbed(length, "image", url);// 调整光标到最后quill.setSelection(length + 1);} else {// 提示信息，需引入Messagethis.$message({type: "error",message: "图片插入失败",});}},