資訊專欄INFORMATION COLUMN
摘要：的增強模塊，功能提供圖片上傳到服務器的功能復制插入拖拽插入顯示上傳進度顯示上傳成功或者失敗支持與其他模塊一起使用例如調整圖片大小富文本框參數設置的所有可配置項可選參數是否顯示上傳進
quill-image-extend-module
vue-quill-editor的增強模塊，
功能：
提供圖片上傳到服務器的功能
復制插入
拖拽插入
顯示上傳進度
顯示上傳成功或者失敗
支持與其他模塊一起使用（例如調整圖片大?。?/p> Install
npm 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, // 可選參數 是否顯示上傳進度和提示語
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) => {}, // 可選參數 設置請求頭部
start: () => {}, // 可選參數 自定義開始上傳觸發事件
end: () => {}, // 可選參數 自定義上傳結束觸發的事件，無論成功或者失敗
error: () => {}, // 可選參數 自定義網絡錯誤觸發的事件
change: (xhr, formData) => {} // 可選參數 選擇圖片觸發，也可用來設置頭部，但比headers多了一個參數，可設置formData
},
toolbar: {
container: container, // container為工具欄，此次引入了全部工具欄，也可自行配置
handlers: {
"image": function () { // 劫持原來的圖片點擊按鈕事件
document.querySelector(".quill-image-input").click()
}
}
}
}
}
注意事項 （matters need attention）
由于不同的用戶的服務器返回的數據格式不盡相同
因此
在配置中，你必須如下操作
// 你必須把返回的數據中所包含的圖片地址 return 回去
respnse: (res) => {
return res.info // 這里切記要return回你的圖片地址
}
比如你的服務器返回的成功數據為
{
code: 200,
starus: true,
result: {
img: "http://placehold.it/100x100" // 服務器返回的數據中的圖片的地址
}
}
那么你應該在參數中寫為：
// 你必須把返回的數據中所包含的圖片地址 return 回去
respnse: (res) => {
return res.result.img // 這里切記要return回你的圖片地址
}
與其他模塊一起使用（以resize-module為例子）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92776.html
摘要：我們通常都會使用富文本編輯器在后臺編輯內容，開發當然也少不了，我們通過官網的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。 我們通常都會使用富文本編輯器在后臺編輯內容，開發vue當然也少不了，我們通過vue官網的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。我使用的是vue-quill-editor，它的界面很簡潔，功能也滿足平時的編輯需要，不過于臃腫，但是它默...
摘要：我們通常都會使用富文本編輯器在后臺編輯內容，開發當然也少不了，我們通過官網的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。 我們通常都會使用富文本編輯器在后臺編輯內容，開發vue當然也少不了，我們通過vue官網的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。我使用的是vue-quill-editor，它的界面很簡潔，功能也滿足平時的編輯需要，不過于臃腫，但是它默...
摘要：優秀的富文本編輯器有很多，比如，等，但并不是每個都能在移動端有很好的表現。是百度的老牌富文本編輯器，但界面有一股上世紀的感覺，官網最新的一條動態停留在。優秀的富文本編輯器有很多，比如：UEditor，wangEditor 等，但并不是每個都能在移動端有很好的表現。 我們暫且不討論移動端是否真的需要富文本，既然有這需求，就把它實現出來。 失敗的嘗試 正確的選擇是成功的開始，開發之前肯定要做一些...
摘要：原生上傳圖片到服務器上次給大家分享過下面的文章結合上傳圖片到服務器基于上面的原理，我又替大家把整個配置封裝好了，大家在使用的時候直接引入配置文件即可。 原生上傳圖片到服務器 上次給大家分享過下面的文章結合element-ui上傳圖片到服務器基于上面的原理，我又替大家把整個配置封裝好了，大家在使用的時候直接引入配置文件即可。無需引入element-ui，并且增加了部分功能： 可限制圖片...
閱讀 2629·2021-11-23 09:51
閱讀 861·2021-09-24 10:37
閱讀 3612·2021-09-02 15:15
閱讀 1962·2019-08-30 13:03
閱讀 1881·2019-08-29 15:41
閱讀 2624·2019-08-29 14:12
閱讀 1424·2019-08-29 11:19
閱讀 3301·2019-08-26 13:39
