> vue-quill-editor 默认的是以base64保存图片，会直接把图片base64和内容文本一同以字符串的形式提交到后端。 现在这样不科学 ##### 安装 vue-quill-editor ``` npm i vue-quill-editor --save ``` > 富文本示例代码 https://github.com/gek6/letou_hr/blob/master/letou_admin_web/src/views/rich_text/rich_text.vue > 图片直传七牛云 https://github.com/gek6/letou_hr/blob/master/letou_admin_web/src/api/upload.js ##### 思路 - 用自定义的方法代替quill-editor中的图片点击事件 - 点击上传图片的icon后，去触发file类型 input 的点击事件，选择图片。（我这用的是饿了么的上传组件，上传到七牛云我已经写好了） - 监听input的 onchange 拿到选择的文件数据，然后是要上传到自己服务器呢 还是上传到七牛云 就随意了。 - 上传完成以后 将图片的远程路径 添加到富文本内容区域 ##### 页面内引入 ``` import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor' //注册组件 components: { quillEditor }, ``` ``` <div class="rich_box"> <!--富文本组件--> <quill-editor v-model="content" ref="myQuillEditor" :options="options"></quill-editor> </div> <!--饿了么上传组件，也可以用input代替，都是隐藏起来--> <el-upload class="avatar-uploader" action="" :http-request="to_upload_img" :show-file-list="false" style="display: none" > <i class="el-icon-plus avatar-uploader-icon" id="imgInput"></i> </el-upload> ``` ##### 添加自定义方法 ``` //mounted钩子中 替换插件图标点击事件 // 为图片ICON绑定事件 getModule 为编辑器的内部属性 this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler) ``` ``` // 点击图片ICON触发事件 imgHandler(state) { console.log(state) this.addRange = this.$refs.myQuillEditor.quill.getSelection() if (state) { // let fileInput = document.getElementById('imgInput') // fileInput.click() // 加一个触发事件 // 选择并上传一张图片 let fileInput = document.getElementById('imgInput') fileInput.click() // 加一个触发事件 } }, ``` ``` to_upload_img(formdata){ return new Promise((resolve,reject)=>{ upload_img(formdata).then(res=>{ // 图片的远程路径 let value = res.key; // 将图片添加到富文本内容区域 this.addRange = this.$refs.myQuillEditor.quill.getSelection(); // 调用编辑器的 insertEmbed 方法，插入URL this.$refs.myQuillEditor.quill.insertEmbed(this.addRange !== null ? this.addRange.index : 0, 'image', value, Quill.sources.USER) }) }) } ```