更多內容請瀏覽本人博客
在前后端分離的前提下,配置ueditor實現文件上傳(主要是圖片和視頻),并在編輯器中反顯,注重后臺接口的編寫
目錄結構
后端采用Java,目錄結構如下:
項目github地址: https://github.com/weylanshi/UeditorSpringboot.git
前端采用的vue,目錄結構如下:
項目github地址: https://github.com/weylanshi/ueditor-web.git
項目運行
將項目clone 下來后可以直接導入編輯器中運行.重要的配置文件在resource/config.json ,中間有配置的注釋
- 配置端項目端口
在后臺項目的application.yml 配置服務器運行端口
server:
port: 8500
在前臺項目的 \static\ueditor\ueditor.config.js 中修改為后臺發布的端口
window.UEDITOR_CONFIG = {
//為編輯器實例添加一個路徑，這個不能被注釋
UEDITOR_HOME_URL: URL
// 服務器統一請求接口路徑
, serverUrl: "http://localhost:8500/ueditor/exec"
}
- 修改文件保存的方法
在StorageManager.java 中有個TODO, 項目中調注釋的是調用DFS的存儲服務,在測試的時候可以保存在本地
可做如下修改:
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", /* 圖片訪問路徑前綴 */
需要注意的是這里一定要添加http:// 或者 https:// 不然訪問不到,
我在實際項目中是使用的 nfs 文件系統,實現的文件目錄的共享,在一臺機器保存的圖片,另一臺機器搭建的nginx圖片服務器,直接訪問的nginx的靜態資源路徑
- 部署
項目打成jar包運行的時候有個大坑, 一直報 config.json 路徑不對, 我嘗試設置成相對路徑讀取,但是沒有成功,最后的解決辦法是將 ConfigManager.java 中的配置文件路徑寫成了絕對路徑(暫時沒想到優雅的解決辦法...)
自此,springboot 集成 ueditor 踩的坑基本踩完,具體的代碼細節可以clone項目下來細看, 后續可能有補充
