参考https://blog.csdn.net/weixin_42080056/article/details/987743541。安装vue-quill-editornpm和vue-quill-editor2。引入import{quillEditor}from'vue-quill-editor'3。vue添加组件，隐藏element-ui的el-upload4.datafileUpload:{token:'',key:''},content:'',editorOption:{placeholder:'Pleaseentercontent',theme:'snow',modules:{toolbar:{容器:[['bold','italic','underline','strike'],['blockquote','code-block'],[{'header':1},{'header':2}],[{'list':'ordered'},{'list':'bullet'}],[{'script':'sub'},{'script':'super'}],[{'indent':'-1'},{'indent':'+1'}],[{'direction':'rtl'}],[{'size':['small',false,'large','huge']}],[{'header':[1,2,3,4,5,6,false]}],[{'color':[]},{'background':[]}],[{'font':[]}],[{'align':[]}],['link','image','video'],['clean']],handlers:{'image':function(value){if(value){document.querySelector('.avatar-uploaderinput').click()}else{this.quill.format('图像',false);}}}}}},imgUrl:'',5.重点是上传成功后上传方法uploadSuccess，调用el-upload的上传函数，返回拼接图片和插入富文本的路径uploadSuccess(res,file){this.imgUrl='七牛资源路径'+file.name//先获取富文本编辑器的实例letquill=this.$refs.myQuillEditor.quill//上传成功后执行if(res){//获取光标的位置letlength=quill.getSelection().index;//插入图片res是服务器返回的数据quill.insertEmbed(length,'image',this.imgUrl)//将光标移动到文本末尾quill.setSelection(length+1)}else{this.$message.error('图片插入失败')}},beforeUpload(file){this.fileUpload.key=file.name},
