如何在vue項目中使用百度編輯器ueditor


百度編輯器官方並沒有提供vue項目使用說明,目前網上也有不少人實現了相關功能,這里就不再重復,只是針對自身項目碰到的情況做個記錄,就當是熟悉了一遍富文本編輯器的代碼結構。

按照網上的做法,基本可以實現編輯器的基本使用,但存在兩個問題

  a、編輯器內容回顯,調用官方的setContent方法無法將后端返回的數據現在在編輯起立

  b、無法實現圖片上傳,官方提供了asp/jsp/php的配置方法,未提供vue項目的配置辦法,這就要自己去處理了

第一個問題:

  因為使用編輯器自帶的setContent()方法無法將后端返回的數據顯示出來,就嘗試輸出編輯器對象,看看這個對象上是否有對應的屬性或方法能用

從輸出的所有屬性上看並沒有setContent()方法,好在找到了一個

this.$refs.ue.editor.body.innerHTML 

屬性

將后端獲取到的數據復制給該屬性就實現了數據的回顯

第二個問題

在配置文檔中有一個serverUrl屬性,在ueditor.config.js文件中,該屬性是編輯器圖片上傳接口屬性,插件初始化時會檢測該接口是否可用來判斷是否初始化圖片上傳功能,網上很多教程都沒有解決這個問題,這也是本文的價值所在。

按照官方文檔給serverUrl賦值自己的上傳接口,遺憾的是已經無效,仔細翻看源碼后發現了下面一行:

serverUrl = serverUrl + (serverUrl.indexOf('?') == -1 ? '?':'&') + 'action=' + (actionName || '');

  

再到瀏覽器審查元素里對比發現插件給我們配置的接口做了拼接處理,如:

http://aa.cc.cc/upload

  

變成了

http://aa.cc.cc/upload?encode=utf-8&action=uploadimg

  

由於后端嚴格限制了路由,這種網址就無法訪問了,所以只能處理掉這段插件代碼。這里要注意的是插件中多個地方涉及到了對上傳接口地址的拼接,可以全局搜索一下,需要哪里改哪里。

 

本項目在上傳時統一需要攜帶一個token,插件本身是沒有這個功能的,翻看源碼發現,在ueditor.all.js中有這樣一段代碼

configUrl && UE.ajax.request(configUrl,{
   // .... 
})

  

這段代碼就是發送請求,檢測接口是否可用的關鍵,之前因為缺少token一直提示接口未正確配置,這里改一下,加個token參數即可,代碼大概在8074行

'data': {
     token: localStorage.getItem("token")
},

  

修改后接口就通了

 

百度ueditor有兩個上傳圖片的地方,如圖:

左側適合傳單圖,右側適合傳多圖。

單圖其實就是表單提交,多圖則是異步提交,因本項目token必須擋在請求頭中要實現該功能必須修改提交方式,這就麻煩了點,所以本次暫不處理單圖上傳的情況。

多圖上傳則設計到一個dialog彈窗,代碼在“UE/dialogs/image/images.js”中,改函數封裝了很多構造函數,分別針對四個tab

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM