更多内容请浏览本人博客
在前后端分离的前提下,配置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项目下来细看, 后续可能有补充
