vue-quill-editor實現(xiàn)圖片上傳功能-創(chuàng)新互聯(lián)
問題描述
項目使用的vue2.0開發(fā)，項目中需要一個富文本編輯器，樓主經(jīng)過一番心理掙扎選擇了vue-quill-editor。具體如何引用作者在項目中已經(jīng)寫得很明白了，我在這里就不再贅述。
vue-quill-editor插入圖片的方式是將圖片轉(zhuǎn)為base64再放入內(nèi)容中，這樣就會產(chǎn)生一個問題，如果圖片比較大的話，富文本的內(nèi)容就會很大，樓主是將內(nèi)容存在數(shù)據(jù)庫中的，這樣一來，一方面會占用大量的數(shù)據(jù)庫存儲空間，另一方面當(dāng)圖片太大的時候富文本的內(nèi)容，會超過數(shù)據(jù)庫的存儲上限，從而會產(chǎn)生內(nèi)容被截斷從而顯示不全的問題（即使是text類型，也有存儲上限65535）。
那么問題來了，如何將圖片上傳到自己的服務(wù)器或第三方服務(wù)，然后將獲得的圖片url插入到文本中呢？我認(rèn)為大致有兩個方法，其一是將任務(wù)交給服務(wù)端，服務(wù)端截取base64圖片并轉(zhuǎn)化為文件，將其路徑或者url替換原來的圖片數(shù)據(jù)；其二是對控件本身下手，首先將圖片上傳，然后插入到富文本中。接下來樓主就開始了自己的踩坑之路。
解決方案
基礎(chǔ)簡介
1.vue-quill-editor是基于quill(github地址)適用于Vue2的富文本編輯器，所以對于quill的原生屬性擴(kuò)展也是支持的。quill文檔地址
2.quill 中有許多擴(kuò)展和自定義方法功能。比如圖片的重定義大小、圖片上傳的點擊處理等。
圖片上傳
通過查看quill項目issue。發(fā)現(xiàn)其中是有對圖片上傳這方面問題進(jìn)行考慮和修改的。所以圖片上傳這個方案是可行的。接下來就是如何實現(xiàn)。
3.首先我們需要在項目中拿到quill的實例。這個在vue-quill-editor項目中有介紹如何獲取?；痉椒ň褪峭ㄟ^ref獲取你的vue-quill-editor實例，再獲取quill實例，代碼如下。其中newEditor就是我的vue-quill-editor
this.$refs.newEditor.quill
4.在拿到實例后我們需要考慮如何圖片上傳并將url插入文本中。通過查找發(fā)現(xiàn)可以注冊一個自定義的圖片處理函數(shù)，當(dāng)頂部的工具欄中的圖片按鈕被點擊的時候，就會觸發(fā)這個函數(shù)。然而在實際使用中你會發(fā)現(xiàn)這個函數(shù)并不像文檔中所說的接收（image, callback）兩個參數(shù)，image是你的圖片，你只需要在callback中將傳入處理后的url就可以。而是接收一個參數(shù)state，當(dāng)被點擊時就會觸發(fā)這個函數(shù)，并傳入state值----true。這里首先介紹一下，如何注冊這個處理函數(shù)-imgHandler。這里要注意，注冊函數(shù)要寫在mounted生命周期鉤子里。
mounted() {
var vm =this
var imgHandler = async function(state) {
if (state) {
//button is clicked
}
}
vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
}
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
分享文章：vue-quill-editor實現(xiàn)圖片上傳功能-創(chuàng)新互聯(lián)
鏈接URL：http://m.jiaotiyi.com/article/ddjhgi.html