啊！！！好久没更新了，最近粉丝和访问量见长，正好有童鞋的项目遇到点问题，故出此文，
今天超哥给小伙伴带来的是vue中富文本编辑器上传的问题。
曾经写过一个文档管理的项目，用到最多的就是富文本编辑器。
说说遇到的坑吧：最终的提交结果，后端不要文档流，后端要上传成功返回的路径，不知道正在阅读此文的小伙伴是如何处理的，瞅着挺简单，但写起来还真有点麻烦，在这里以vue-quill-editor为例给大家演示。
首先安装，不用多说了吧，cnpm installvue-quill-editor -S
接着，引入依赖
import VueQuillEditor from 'vue-quill-editor';import 'quill/dist/quill.core.css';import 'quill/dist/quill.snow.css';import 'quill/dist/quill.bubble.css';Vue.use(VueQuillEditor)
先说一下实现过程吧，依赖element-ui，当然你可以想成你自己想要的上传插件，或者有大神可以直接new FormData()也是可以的。用白话文讲就是把插件中的图片按钮用el-upload覆盖，就这么简单。具体实现过程请继续往下看。
在所需的vue文件中
首先看DOM层，只需两个标签即可（quill-editor，el-upload）
附代码：
<el-uploadclass="avatar-uploader":action="serverUrl"name="img":data='fileUpload':show-file-list="false":on-success="uploadSuccess":on-error="uploadError":before-upload="beforeUpload"></el-upload><quill-editor v-model="docContent"ref="myQuillEditor":options="editorOption"@blur="handleEditorBlur($event)"@focus="handleEditorFocus($event)"@change="handleEditorChange($event)"></quill-editor>
写过vue的相信el-upload大家都不陌生，在这里就不一一介绍各个属性了，而quill-editor这里超哥直接附上传送门vue-quill-editor - npm
数据层，附代码：
fileUpload:{ //附件上传file:null},serverUrl: 'http://********',//上传图片的地址editorOption: {placeholder: '',theme: 'snow',modules: {toolbar: {container: toolbarOptions, // 工具栏handlers: {'image': function (value) {if (value) {document.querySelector('.avatar-uploader input').click()} else {this.quill.format('image', false);}}}}}},
看到这里有的小伙伴可能看到了重点，toolbarOptions是哪里来的，不要急，这个东西就是所需配置的工具栏，当时我们项目有回显功能所以超哥单独给他摘出来了。
toolbarOptions.js附代码：
const toolbarOptions = [['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'] ]export default toolbarOptions
然后继续，逻辑层，附代码：
注：uploadSuccess为改写的重中之重。
uploadError() {// loading动画消失this.quillUpdateImg = falsethis.$message.error('图片插入失败')},uploadSuccess(res, file){// 首先获取富文本编辑器的实例let quill = this.$refs.myQuillEditor.quill// 上传成功所执行if (res.code == 200 && res.data !== null) {// 获取光标所在位置let length = quill.getSelection().index;// 插入图片res为服务器返回的数据quill.insertEmbed(length, 'image', res.data)// 光标移动至文本末端quill.setSelection(length + 1)} else {this.$message.error('图片插入失败')}// loading动画消失this.quillUpdateImg = false},beforeUpload(file) {this.fileUpload.file=file;// 显示loading动画this.quillUpdateImg = true},handleEditorBlur () {},handleEditorFocus () {},//这个是当初做的个文字限制后来没用就注释了handleEditorChange (e) {/*this.textLen = e.text.length - 1;this.beyond = this.textLen - 350;if (this.textLen > 350) {this.info.evId = '';} else {this.info.evId = this.evList[0].evId;}*/},
到这里此工程其实就已经竣工，说简单也简单说复杂也复杂，全在自己的摸索和探讨。
有时候比较忙，顾不上一一回复，但是看到了就一定会回复，
各位小伙伴和童鞋有不明白的或者不会的依然可以留言...
依旧老样子，不喜勿喷，写给需要的人看，渣*请自觉绕道
