前言

使用vue-cli3.0+element-ui+webpack做專案時,遇到了一個需求:文章管理中新增富文字編輯器(暫未新增上傳圖片功能),在百度上檢視到好幾個富文字編輯器,最終選擇了百度的Ueditor,基本能滿足所有需求。經過多番採坑之後，已實現相關功能,特此做一個記錄。

一、下載Ueditor相關靜態檔案存放位置

首先去Ueditor官網下載相關資源(本文下載的1.4.3.3Jsp版本):

這裡主要針對vue-cli2與vue-cli3進行區分。

vue-cli2

vue-cli2 版本中會生成一個static資料夾,用於放置靜態資源,將下載的壓縮包解壓後放入static資料夾中:

vue-cli3

vue-cli3 在專案初始化時會生成一個public資料夾(public資料夾使用場景,public資料夾中的檔案不會被webpack打包編譯,只是簡單的複製到打包後的dist資料夾中)。將下載的壓縮包解壓並重新命名UE放入public資料夾中:

二、引入vue-ueditor-wrap後的相關配置

先安裝vue-ueditor-wrap,然後在相關元件中引入vue-ueditor-wrap

npm i vue-ueditor-wrap -D
複製程式碼

在相關元件中註冊並引入:

重點主要在myconfig配置引數上(詳細配置引數見UE/ueditor.config.js)，在vue-cli2與vue-cli3上略顯不同。

vue-cli2

專案使用vue-cli2進行搭建並且將UE資料夾複製到了static資料夾中(如第一點所示),UEDITOR_HOME_URL配置為:

同時修改配置檔案ueditor.config.js中的UEDITOR_HOME_URL為'/UE/'

vue-cli3

使用vue-cli3的UEDITOR_HOME_URL配置為:

同時修改配置檔案ueditor.config.js中的UEDITOR_HOME_URL為'/static/UE/'

上述步驟無誤的話,最終顯示結果應為:

三、修改富文字內容長度計算方式

該Ueditor中的內容長度(在這裡僅以vue雙向繫結為例)都是按照1個字元長度進行計算的,如插入一個表情顯示長度為1:

實際上應該為帶標籤的位元組長度,這裡需要修改ueditor.all.js或者ueditor.all.min.js的原始碼。

修改ueditor.all.js的方式

在ueditor.all.js檔案中全域性查詢getContentLength:

將高亮部分註釋掉,然後將該檔案壓縮混淆後替換ueditor.all.min.js檔案即可

修改ueditor.all.min.js的方式

該方式比較簡單粗暴,直接在ueditor.all.min.js中全域性搜尋getContentLength並刪除高亮部分:

修改成功後的效果為:

四、其他問題

如在配置中出現下圖類似問題：

請仔細檢查配置引數UEDITOR_HOME_URL路徑是否正確。仔細檢查！仔細檢查！仔細檢查！重要的事情說三遍~

最後

希望本文能幫助到有需要的你~

相關參考資料:
vue-ueditor-wrap