# quill-image-extend-module vue-quill-editor的增強模塊， github:https://github.com/NextBoy/quill-image-extend-module 功能： - 提供圖片上傳到服務器的功能 - 復制插入 - 拖拽插入 - 顯示上傳進度 - 顯示上傳成功或者失敗 - 支持與其他模塊一起使用（例如調整圖片大小） ## 更新情況 - version 1.1 - 增加上傳顯示文字樣式 - 增加圖片超過自定義大小的回調 sizeError - 修復同一頁面多個富文本編輯器上傳圖片只能插入第一個編輯器的bug - 引入QuillWatch 全局監聽多個富文本編輯器 - version 1.1.2 - 由于編輯器本身就有復制功能，因此取消了復制上傳服務器的功能，避免沖突，復制上傳采用富文本編輯器自帶的功能 - 修復圖片插入老是跑到最后面的問題 ## Install ```bash npm install quill-image-extend-module --save-dev ``` ## use ```ecmascript 6 import {quillEditor, Quill} from 'vue-quill-editor' import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module' Quill.register('modules/ImageExtend', ImageExtend) ``` ## example ```ecmascript 6 <template> <div class="quill-wrap"> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" > </quill-editor> </div> </template> <script> import {quillEditor, Quill} from 'vue-quill-editor' import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module' Quill.register('modules/ImageExtend', ImageExtend) export default { components: {quillEditor}, data() { return { content: '', // 富文本框參數設置 editorOption: { modules: { ImageExtend: { loading: true, name: 'img', action: updateUrl, response: (res) => { return res.info } }, toolbar: { container: container, handlers: { 'image': function () { QuillWatch.emit(this.quill.id) } } } } } } } } </script> ``` ## quill-image-extend-module 的所有可配置項 ```ecmascript 6 editorOption: { modules: { ? ? ? ? ? ? ? ? ? ? ? ? ImageExtend: { // 如果不作設置，即{} ?則依然開啟復制粘貼功能且以base64插入 name: 'img', // 圖片參數名 size: 3, // 可選參數 圖片大小，單位為M，1M = 1024kb action: updateUrl, // 服務器地址, 如果action為空，則采用base64插入圖片 // response 為一個函數用來獲取服務器返回的具體圖片地址 // 例如服務器返回{code: 200; data:{ url: 'baidu.com'}} // 則 return res.data.url response: (res) => { return res.info }, headers: (xhr) => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? // xhr.setRequestHeader('myHeader','myValue') }, // 可選參數 設置請求頭部 sizeError: () => {}, // 圖片超過大小的回調 start: () => {}, // 可選參數 自定義開始上傳觸發事件 end: () => {}, // 可選參數 自定義上傳結束觸發的事件，無論成功或者失敗 error: () => {}, // 可選參數 上傳失敗觸發的事件 success: () => {}, // 可選參數 上傳成功觸發的事件 ? ? ? ? ? ? ? ? ? ? ? ? ? ? change: (xhr, formData) => { // xhr.setRequestHeader('myHeader','myValue') // formData.append('token', 'myToken') } // 可選參數 每次選擇圖片觸發，也可用來設置頭部，但比headers多了一個參數，可設置formData }, ? ? ? ? ? ? ? ? ? ? ? ? toolbar: { // 如果不上傳圖片到服務器，此處不必配置 ? ? ? ? ? ? ? ? ? ? ? ? ? ? container: container, // container為工具欄，此次引入了全部工具欄，也可自行配置 handlers: { 'image': function () { // 劫持原來的圖片點擊按鈕事件 QuillWatch.emit(this.quill.id) } } } } } ``` ### 注意事項 （matters need attention） 由于不同的用戶的服務器返回的數據格式不盡相同 因此 在配置中，你必須如下操作 ```vue // 你必須把返回的數據中所包含的圖片地址 return 回去 respnse: (res) => { return res.info // 這里切記要return回你的圖片地址 } ``` 比如你的服務器返回的成功數據為 ```vue { code: 200, starus: true, result: { img: 'http://placehold.it/100x100' // 服務器返回的數據中的圖片的地址 } } ``` 那么你應該在參數中寫為： ```vue // 你必須把返回的數據中所包含的圖片地址 return 回去 respnse: (res) => { return res.result.img // 這里切記要return回你的圖片地址 } ``` ## 與其他模塊一起使用（以resize-module為例子） ```ecmascript 6 <template> <div class="quill-wrap"> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" > </quill-editor> </div> </template> <script> import {quillEditor, Quill} from 'vue-quill-editor' import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module' import ImageResize from 'quill-image-resize-module' Quill.register('modules/ImageExtend', ImageExtend) // use resize module Quill.register('modules/ImageResize', ImageResize) export default { components: {quillEditor}, data() { return { content: '', // 富文本框參數設置 editorOption: { modules: { ImageResize: {}, ImageExtend: { name: 'img', size: 2, // 單位為M, 1M = 1024KB action: updateUrl, headers: (xhr) => { }, response: (res) => { return res.info } }, toolbar: { container: container, handlers: { 'image': function () { QuillWatch.emit(this.quill.id) } } } } } } } } </script> ``` ## (如果覺得還不錯，請右上角點擊下星星，此致敬禮)