Vue集成Ueditor

前言

使用vue-cli3.0+element-ui+webpack作項目時,遇到了一個需求:文章管理中添加富文本編輯器(暫未添加上傳圖片功能),在百度上查看到好幾個富文本編輯器,最終選擇了百度的Ueditor,基本能知足全部需求。通過多番採坑以後，已實現相關功能,特此作一個記錄。

1、下載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文件夾中:

2、引入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/'

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

3、修改富文本內容長度計算方式

該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並刪除高亮部分:

修改爲功後的效果爲:

4、其餘問題

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

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

最後

但願本文能幫助到有須要的你~

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