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

在前后端分离的前提下,配置ueditor实现文件上传(主要是图片和视频),并在编辑器中反显,注重后台接口的编写

---

目录结构

后端采用Java,目录结构如下:

TIM截图20180202160257.png

项目github地址: https://github.com/weylanshi/UeditorSpringboot.git
前端采用的vue,目录结构如下:

TIM截图20180202160006.png

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

项目运行

将项目clone 下来后可以直接导入编辑器中运行.重要的配置文件在resource/config.json ,中间有配置的注释

1. 配置端项目端口

在后台项目的application.yml 配置服务器运行端口

server:
     port: 8500

在前台项目的 \static\ueditor\ueditor.config.js 中修改为后台发布的端口

window.UEDITOR_CONFIG = {
    //为编辑器实例添加一个路径，这个不能被注释
    UEDITOR_HOME_URL: URL
    // 服务器统一请求接口路径
    , serverUrl: "http://localhost:8500/ueditor/exec"
}

2. 修改文件保存的方法

在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的静态资源路径

4. 部署

项目打成jar包运行的时候有个大坑, 一直报 config.json 路径不对, 我尝试设置成相对路径读取,但是没有成功,最后的解决办法是将 ConfigManager.java 中的配置文件路径写成了绝对路径(暂时没想到优雅的解决办法...)

自此,springboot 集成 ueditor 踩的坑基本踩完,具体的代码细节可以clone项目下来细看, 后续可能有补充