問題描述

  項(xiàng)目使用的vue2.0開發(fā)，項(xiàng)目中需要一個富文本編輯器，樓主經(jīng)過一番心理掙扎選擇了vue-quill-editor。具體如何引用作者在項(xiàng)目中已經(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)容被截?cá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ò)展和自定義方法功能。比如圖片的重定義大小、圖片上傳的點(diǎn)擊處理等。

圖片上傳

通過查看quill項(xiàng)目issue。發(fā)現(xiàn)其中是有對圖片上傳這方面問題進(jìn)行考慮和修改的。所以圖片上傳這個方案是可行的。接下來就是如何實(shí)現(xiàn)。

3.首先我們需要在項(xiàng)目中拿到quill的實(shí)例。這個在vue-quill-editor項(xiàng)目中有介紹如何獲取?；痉椒ň褪峭ㄟ^ref獲取你的vue-quill-editor實(shí)例，再獲取quill實(shí)例，代碼如下。其中newEditor就是我的vue-quill-editor

 this.$refs.newEditor.quill

4.在拿到實(shí)例后我們需要考慮如何圖片上傳并將url插入文本中。通過查找發(fā)現(xiàn)可以注冊一個自定義的圖片處理函數(shù)，當(dāng)頂部的工具欄中的圖片按鈕被點(diǎn)擊的時候，就會觸發(fā)這個函數(shù)。然而在實(shí)際使用中你會發(fā)現(xiàn)這個函數(shù)并不像文檔中所說的接收（image, callback）兩個參數(shù)，image是你的圖片，你只需要在callback中將傳入處理后的url就可以。而是接收一個參數(shù)state，當(dāng)被點(diǎn)擊時就會觸發(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)
}

5.通過在stackflow查閱，發(fā)現(xiàn)就只能在imgHandler中自己實(shí)現(xiàn)點(diǎn)擊上傳和插入的功能。這樣就在editor下面寫一個不顯示的input，并監(jiān)聽變化上傳圖片，獲取其實(shí)例，當(dāng)imgHandler被點(diǎn)擊時，模擬input按鈕被點(diǎn)擊。代碼變成如下示例。

 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() //加一個觸發(fā)事件
 }
 }
 vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
 }

6.最后是input的點(diǎn)擊上傳和圖片url的插入。

HTML代碼

 <div
 v-loading="imageLoading"
 element-loading-text="請稍等，圖片上傳中">
 <quill-editor
 ref="newEditor"
 :options="newOption"
 style="height: 200px; margin-bottom: 54px"
 v-model="editorContent"
 @change="editorChange">
 </quill-editor>
 <form action="" method="post" enctype="multipart/form-data" id="uploadFormMulti">
 <input style="display: none" :id="uniqueId" type="file" name="avator" multiple accept="image/jpg,image/jpeg,image/png,image/gif" @change="uploadImg('uploadFormMulti')"><!--style="display: none"-->
 </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)// 自定義的圖片上傳函數(shù)
  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集成到了控件中。具體實(shí)現(xiàn)比較簡單可以參考vue-quill-editor中的demo示例

 import Quill from 'quill'
 import { ImageResize } from '../modules/ImageResize.js'
 Quill.register('modules/imageResize', ImageResize)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論