更多內(nèi)容請(qǐng)瀏覽本人博客
在前后端分離的前提下,配置ueditor實(shí)現(xiàn)文件上傳(主要是圖片和視頻),并在編輯器中反顯,注重后臺(tái)接口的編寫(xiě)
目錄結(jié)構(gòu)
后端采用Java,目錄結(jié)構(gòu)如下:
項(xiàng)目github地址: https://github.com/weylanshi/UeditorSpringboot.git
前端采用的vue,目錄結(jié)構(gòu)如下:
項(xiàng)目github地址: https://github.com/weylanshi/ueditor-web.git
項(xiàng)目運(yùn)行
將項(xiàng)目clone 下來(lái)后可以直接導(dǎo)入編輯器中運(yùn)行.重要的配置文件在resource/config.json ,中間有配置的注釋
- 配置端項(xiàng)目端口
在后臺(tái)項(xiàng)目的application.yml 配置服務(wù)器運(yùn)行端口
server:
port: 8500
在前臺(tái)項(xiàng)目的 \static\ueditor\ueditor.config.js 中修改為后臺(tái)發(fā)布的端口
window.UEDITOR_CONFIG = {
//為編輯器實(shí)例添加一個(gè)路徑，這個(gè)不能被注釋
UEDITOR_HOME_URL: URL
// 服務(wù)器統(tǒng)一請(qǐng)求接口路徑
, serverUrl: "http://localhost:8500/ueditor/exec"
}
- 修改文件保存的方法
在StorageManager.java 中有個(gè)TODO, 項(xiàng)目中調(diào)注釋的是調(diào)用DFS的存儲(chǔ)服務(wù),在測(cè)試的時(shí)候可以保存在本地
可做如下修改:
File dir = new File(path);
if(!dir.exists()){
dir.mkdirs();
}
FileCopyUtils.copy(dataBuf,new FileOutputStream(path+"/"+picName));
3.圖片回顯配置
在resource/config.json 中存在 imageUrlPrefix 配置:
"imageUrlPrefix": "http://192.168.100.73:83", /* 圖片訪問(wèn)路徑前綴 */
需要注意的是這里一定要添加http:// 或者 https:// 不然訪問(wèn)不到,
我在實(shí)際項(xiàng)目中是使用的 nfs 文件系統(tǒng),實(shí)現(xiàn)的文件目錄的共享,在一臺(tái)機(jī)器保存的圖片,另一臺(tái)機(jī)器搭建的nginx圖片服務(wù)器,直接訪問(wèn)的nginx的靜態(tài)資源路徑
- 部署
項(xiàng)目打成jar包運(yùn)行的時(shí)候有個(gè)大坑, 一直報(bào) config.json 路徑不對(duì), 我嘗試設(shè)置成相對(duì)路徑讀取,但是沒(méi)有成功,最后的解決辦法是將 ConfigManager.java 中的配置文件路徑寫(xiě)成了絕對(duì)路徑(暫時(shí)沒(méi)想到優(yōu)雅的解決辦法...)
自此,springboot 集成 ueditor 踩的坑基本踩完,具體的代碼細(xì)節(jié)可以clone項(xiàng)目下來(lái)細(xì)看, 后續(xù)可能有補(bǔ)充
