資訊專欄INFORMATION COLUMN
摘要：的增強模塊，功能提供圖片上傳到服務(wù)器的功能復(fù)制插入拖拽插入顯示上傳進(jìn)度顯示上傳成功或者失敗支持與其他模塊一起使用例如調(diào)整圖片大小富文本框參數(shù)設(shè)置的所有可配置項可選參數(shù)是否顯示上傳進(jìn)
quill-image-extend-module
vue-quill-editor的增強模塊，
功能：
提供圖片上傳到服務(wù)器的功能
復(fù)制插入
拖拽插入
顯示上傳進(jìn)度
顯示上傳成功或者失敗
支持與其他模塊一起使用（例如調(diào)整圖片大小）
Installnpm install quill-image-extend-module --save-devuse
import {quillEditor, Quill} from "vue-quill-editor"
import {container, ImageExtend} from "quill-image-extend-module"
Quill.register("modules/ImageExtend", ImageExtend)
example
quill-image-extend-module 的所有可配置項
editorOption: {
modules: {
ImageExtend: {
loading: true, // 可選參數(shù) 是否顯示上傳進(jìn)度和提示語
name: "img", // 圖片參數(shù)名
size: 3, // 可選參數(shù) 圖片大小，單位為M，1M = 1024kb
action: updateUrl, // 服務(wù)器地址, 如果action為空，則采用base64插入圖片
// response 為一個函數(shù)用來獲取服務(wù)器返回的具體圖片地址
// 例如服務(wù)器返回{code: 200; data:{ url: "baidu.com"}}
// 則 return res.data.url
response: (res) => {
return res.info
},
headers: (xhr) => {}, // 可選參數(shù) 設(shè)置請求頭部
start: () => {}, // 可選參數(shù) 自定義開始上傳觸發(fā)事件
end: () => {}, // 可選參數(shù) 自定義上傳結(jié)束觸發(fā)的事件，無論成功或者失敗
error: () => {}, // 可選參數(shù) 自定義網(wǎng)絡(luò)錯誤觸發(fā)的事件
change: (xhr, formData) => {} // 可選參數(shù) 選擇圖片觸發(fā)，也可用來設(shè)置頭部，但比headers多了一個參數(shù)，可設(shè)置formData
},
toolbar: {
container: container, // container為工具欄，此次引入了全部工具欄，也可自行配置
handlers: {
"image": function () { // 劫持原來的圖片點擊按鈕事件
document.querySelector(".quill-image-input").click()
}
}
}
}
}
注意事項 （matters need attention）
由于不同的用戶的服務(wù)器返回的數(shù)據(jù)格式不盡相同
因此
在配置中，你必須如下操作
// 你必須把返回的數(shù)據(jù)中所包含的圖片地址 return 回去
respnse: (res) => {
return res.info // 這里切記要return回你的圖片地址
}
比如你的服務(wù)器返回的成功數(shù)據(jù)為
{
code: 200,
starus: true,
result: {
img: "http://placehold.it/100x100" // 服務(wù)器返回的數(shù)據(jù)中的圖片的地址
}
}
那么你應(yīng)該在參數(shù)中寫為：
// 你必須把返回的數(shù)據(jù)中所包含的圖片地址 return 回去
respnse: (res) => {
return res.result.img // 這里切記要return回你的圖片地址
}
與其他模塊一起使用（以resize-module為例子）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92776.html
摘要：我們通常都會使用富文本編輯器在后臺編輯內(nèi)容，開發(fā)當(dāng)然也少不了，我們通過官網(wǎng)的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。 我們通常都會使用富文本編輯器在后臺編輯內(nèi)容，開發(fā)vue當(dāng)然也少不了，我們通過vue官網(wǎng)的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。我使用的是vue-quill-editor，它的界面很簡潔，功能也滿足平時的編輯需要，不過于臃腫，但是它默...
摘要：我們通常都會使用富文本編輯器在后臺編輯內(nèi)容，開發(fā)當(dāng)然也少不了，我們通過官網(wǎng)的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。 我們通常都會使用富文本編輯器在后臺編輯內(nèi)容，開發(fā)vue當(dāng)然也少不了，我們通過vue官網(wǎng)的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。我使用的是vue-quill-editor，它的界面很簡潔，功能也滿足平時的編輯需要，不過于臃腫，但是它默...
摘要：優(yōu)秀的富文本編輯器有很多，比如，等，但并不是每個都能在移動端有很好的表現(xiàn)。是百度的老牌富文本編輯器，但界面有一股上世紀(jì)的感覺，官網(wǎng)最新的一條動態(tài)停留在。優(yōu)秀的富文本編輯器有很多，比如：UEditor，wangEditor 等，但并不是每個都能在移動端有很好的表現(xiàn)。 我們暫且不討論移動端是否真的需要富文本，既然有這需求，就把它實現(xiàn)出來。 失敗的嘗試 正確的選擇是成功的開始，開發(fā)之前肯定要做一些...
摘要：原生上傳圖片到服務(wù)器上次給大家分享過下面的文章結(jié)合上傳圖片到服務(wù)器基于上面的原理，我又替大家把整個配置封裝好了，大家在使用的時候直接引入配置文件即可。 原生上傳圖片到服務(wù)器 上次給大家分享過下面的文章結(jié)合element-ui上傳圖片到服務(wù)器基于上面的原理，我又替大家把整個配置封裝好了，大家在使用的時候直接引入配置文件即可。無需引入element-ui，并且增加了部分功能： 可限制圖片...
閱讀 2643·2021-11-23 09:51
閱讀 904·2021-09-24 10:37
閱讀 3627·2021-09-02 15:15
閱讀 1971·2019-08-30 13:03
閱讀 1892·2019-08-29 15:41
閱讀 2637·2019-08-29 14:12
閱讀 1436·2019-08-29 11:19
閱讀 3312·2019-08-26 13:39
