> 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) }) }) } ```