springBoot集成ueditor,前后端分離配置

更多內(nèi)容請瀏覽本人博客

在前后端分離的前提下,配置ueditor實現(xiàn)文件上傳(主要是圖片和視頻),并在編輯器中反顯,注重后臺接口的編寫

目錄結(jié)構(gòu)

后端采用Java,目錄結(jié)構(gòu)如下:

TIM截圖20180202160257.png

項目github地址: https://github.com/weylanshi/UeditorSpringboot.git
前端采用的vue,目錄結(jié)構(gòu)如下:

TIM截圖20180202160006.png

項目github地址: https://github.com/weylanshi/ueditor-web.git

項目運行

將項目clone 下來后可以直接導入編輯器中運行.重要的配置文件在resource/config.json ,中間有配置的注釋

配置端項目端口

在后臺項目的application.yml 配置服務器運行端口

server:
     port: 8500

在前臺項目的 \static\ueditor\ueditor.config.js 中修改為后臺發(fā)布的端口

window.UEDITOR_CONFIG = {
    //為編輯器實例添加一個路徑疫诽，這個不能被注釋
    UEDITOR_HOME_URL: URL
    // 服務器統(tǒng)一請求接口路徑
    , serverUrl: "http://localhost:8500/ueditor/exec"
}

修改文件保存的方法

在StorageManager.java 中有個TODO, 項目中調(diào)注釋的是調(diào)用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 文件系統(tǒng),實現(xiàn)的文件目錄的共享,在一臺機器保存的圖片,另一臺機器搭建的nginx圖片服務器,直接訪問的nginx的靜態(tài)資源路徑

部署

項目打成jar包運行的時候有個大坑, 一直報 config.json 路徑不對, 我嘗試設置成相對路徑讀取,但是沒有成功,最后的解決辦法是將 ConfigManager.java 中的配置文件路徑寫成了絕對路徑(暫時沒想到優(yōu)雅的解決辦法...)

自此,springboot 集成 ueditor 踩的坑基本踩完,具體的代碼細節(jié)可以clone項目下來細看, 后續(xù)可能有補充

最后編輯于：2020.03.05 21:05:29

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者