溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
問題描述
項目使用的vue2.0開發，項目中需要一個富文本編輯器，樓主經過一番心理掙扎選擇了vue-quill-editor。具體如何引用作者在項目中已經寫得很明白了，我在這里就不再贅述。
vue-quill-editor插入圖片的方式是將圖片轉為base64再放入內容中，這樣就會產生一個問題，如果圖片比較大的話，富文本的內容就會很大，樓主是將內容存在數據庫中的，這樣一來，一方面會占用大量的數據庫存儲空間，另一方面當圖片太大的時候富文本的內容，會超過數據庫的存儲上限，從而會產生內容被截斷從而顯示不全的問題（即使是text類型，也有存儲上限65535）。
那么問題來了，如何將圖片上傳到自己的服務器或第三方服務，然后將獲得的圖片url插入到文本中呢？我認為大致有兩個方法，其一是將任務交給服務端，服務端截取base64圖片并轉化為文件，將其路徑或者url替換原來的圖片數據；其二是對控件本身下手，首先將圖片上傳，然后插入到富文本中。接下來樓主就開始了自己的踩坑之路。
解決方案
基礎簡介
1.vue-quill-editor是基于quill(github地址)適用于Vue2的富文本編輯器，所以對于quill的原生屬性擴展也是支持的。quill文檔地址
2.quill 中有許多擴展和自定義方法功能。比如圖片的重定義大小、圖片上傳的點擊處理等。
圖片上傳
通過查看quill項目issue。發現其中是有對圖片上傳這方面問題進行考慮和修改的。所以圖片上傳這個方案是可行的。接下來就是如何實現。
3.首先我們需要在項目中拿到quill的實例。這個在vue-quill-editor項目中有介紹如何獲取。基本方法就是通過ref獲取你的vue-quill-editor實例，再獲取quill實例，代碼如下。其中newEditor就是我的vue-quill-editor
this.$refs.newEditor.quill
4.在拿到實例后我們需要考慮如何圖片上傳并將url插入文本中。通過查找發現可以注冊一個自定義的圖片處理函數，當頂部的工具欄中的圖片按鈕被點擊的時候，就會觸發這個函數。然而在實際使用中你會發現這個函數并不像文檔中所說的接收（image, callback）兩個參數，image是你的圖片，你只需要在callback中將傳入處理后的url就可以。而是接收一個參數state，當被點擊時就會觸發這個函數，并傳入state值----true。這里首先介紹一下，如何注冊這個處理函數-imgHandler。這里要注意，注冊函數要寫在mounted生命周期鉤子里。
mounted() {
var vm =this
var imgHandler = async function(state) {
if (state) {
//button is clicked
}
}
vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
}
5.通過在stackflow查閱，發現就只能在imgHandler中自己實現點擊上傳和插入的功能。這樣就在editor下面寫一個不顯示的input，并監聽變化上傳圖片，獲取其實例，當imgHandler被點擊時，模擬input按鈕被點擊。代碼變成如下示例。
mounted() {
var vm =this
var imgHandler = async function(image) {
vm.addImgRange = vm.$refs.newEditor.quill.getSelection()
if (image) {
var fileInput = document.getElementById(vm.uniqueId) //隱藏的file文本ID
fileInput.click() //加一個觸發事件
}
}
vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
}
6.最后是input的點擊上傳和圖片url的插入。
HTML代碼
<div
v-loading="imageLoading"
element-loading-text="請稍等，圖片上傳中">
<quill-editor
ref="newEditor"
:options="newOption"
v-model="editorContent"
@change="editorChange">
</quill-editor>
<form action="" method="post" enctype="multipart/form-data" id="uploadFormMulti">
<input :id="uniqueId" type="file" name="avator" multiple accept="image/jpg,image/jpeg,image/png,image/gif" @change="uploadImg('uploadFormMulti')"><!---->
</form>
</div>
vue代碼
uploadImg: async function(id) {
var vm = this
vm.imageLoading = true
var formData = new FormData($('#' + id)[0])
try {
const url = await vm.uploadImgReq(formData)// 自定義的圖片上傳函數
if (url != null && url.length > 0) {
var value = url
vm.addImgRange = vm.$refs.newEditor.quill.getSelection()
value = value.indexOf('http') != -1 ? value : 'http:' + value
vm.$refs.newEditor.quill.insertEmbed(vm.addImgRange != null?vm.addImgRange.index:0, 'image', value, Quill.sources.USER)
} else {
vm.$message.warning("圖片增加失敗")
}
document.getElementById(vm.uniqueId).value=''
} catch ({message: msg}) {
document.getElementById(vm.uniqueId).value=''
vm.$message.warning(msg)
}
vm.imageLoading = false
},
到這里就大功告成啦。如果有什么錯誤、問題或者更好的解決方案歡迎指正討論~
最后，在解決這個問題的時候，順便把ImageResize集成到了控件中。具體實現比較簡單可以參考vue-quill-editor中的demo示例
import Quill from 'quill'
import { ImageResize } from '../modules/ImageResize.js'
Quill.register('modules/imageResize', ImageResize)
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
