以前传统web工程下使用UEditor是继承ActionEnter实现自己的MyActionEnter来实现自定义文件上传路径的,具体可以参考:UEditor自定义图片/文件上传路径与回显

本文主要是SpringBoot+thymeleaf环境下使用UEditor。

【1】本地环境下不指定上传路径

① 引入pom依赖

<!-- 百度编辑器 -->
<dependency>
<groupId>com.gitee.qdbp.thirdparty</groupId>
<artifactId>ueditor</artifactId>
<version>1.4.3.3</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

② 下载UEditor的jsp版本

UEditor官网:https://ueditor.baidu.com/website/index.html

下载地址:https://ueditor.baidu.com/website/download.html

从官网或者其他地方下载下来,然后放入如下路径 ​​/static/common/plugs/ueditor​​​:
SpringBoot下thymeleaf使用UEditor_spring
当然可以选择其他路径,这里以这个路径为参考。如果你放到其他地方,那么本文描述的其他细节请自行对应修改。

② 修改\static\common\plugs\ueditor\ueditor.config.js

SpringBoot下thymeleaf使用UEditor_json_02

③ 自定义UeditorController

稍微解释下,这里controller拦截的请求​​/common/plugs/ueditor/jsp/controller​​其实就是②中ueditor.config.js的serverUrl。

@Controller
@RequestMapping("/common/plugs/ueditor/jsp")
public class UeditorController {
@RequestMapping("/controller")
@ResponseBody
public void getConfigInfo(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("application/json");
String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static";
System.out.println("rootPath:" + rootPath);
try {
String exec = new ActionEnter(request, rootPath).exec();
System.out.println("exec:" + exec);
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}

为什么要这么做呢?跟踪其源码可以发现它是根据​​this.rootPath, this.contextPath, configPath​​获取配置管理器的—对应config.json。

如果遇到诸如:​​配置文件初始化失败​​错误就是config.json拿不到!

com.baidu.ueditor.ActionEnter:

public ActionEnter(IStorageManager storage, HttpServletRequest request, String rootPath, String configPath) {
this.request = null;
this.rootPath = null;
this.contextPath = null;
this.actionType = null;
this.configManager = null;
this.storage = storage;
this.request = request;
this.rootPath = rootPath;
this.actionType = request.getParameter("action");
this.contextPath = request.getContextPath();
if (configPath == null) {
configPath = request.getParameter("configPath");
if (configPath == null) {
configPath = request.getRequestURI();
}
}

this.configManager = ConfigManager.getInstance(this.rootPath, this.contextPath, configPath);
}

也就是说,如果你参数中没有传configPath,那么它将自动获取request.getRequestURI();–在这里也就是​​/common/plugs/ueditor/jsp/controller​​​。继续再跟下​​ConfigManager.getInstance​​源码如下:

private ConfigManager(String rootPath, String contextPath, String uri) throws FileNotFoundException, IOException {
rootPath = rootPath.replace("\\", "/");
this.rootPath = rootPath;
if (contextPath.length() > 0 && uri.startsWith(contextPath)) {
this.originalPath = this.rootPath + uri.substring(contextPath.length());
} else {
this.originalPath = this.rootPath + uri;
}
this.initEnv();
}

这里也就明朗了,UEditor就是根据originalPath获取到config.json!如果拿不到这玩意,就会报配置错误!

所以其实这中间可操作的地方还有,可以在controller方法中放入configPath!

完成后界面如下:
SpringBoot下thymeleaf使用UEditor_自定义_03
上传的图片为止如下图所示:
SpringBoot下thymeleaf使用UEditor_spring boot_04

此部分相关代码下载地址:SpringBoot+thymeleaf+UEditor+不修改上传路径.zip


【2】项目打jar部署到服务器

① config.json读取问题

按照【1】配置,这时拿不到config.json。

修改controller如下:

/**
* 这里contextPath为空!
*/
@Controller
@RequestMapping("/common/plugs/ueditor/jsp")
public class UeditorController {

private static final Logger logger= LoggerFactory.getLogger(UeditorController.class);
@Value("${com.jane.configjson.baseFilePath}")
private String configJsonPath;

@RequestMapping("/controller")
@ResponseBody
public void getConfigInfo(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("application/json");
logger.debug("配置文件配置的configJsonPath:"+configJsonPath);
String requestURL = request.getRequestURL().toString();
logger.debug("requestURL:"+requestURL);
logger.debug("RequestURI:"+request.getRequestURI());
logger.debug("ContextPath:"+request.getContextPath());
String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static";
String configPath=request.getRequestURI();
if(requestURL.contains("127.0.0.1")||requestURL.contains("localhost")||requestURL.contains("192.168")){
logger.debug("本地环境");
}else{
rootPath=configJsonPath;
configPath="/test";//这里随便写
logger.debug("服务器环境,请将config.json放到"+rootPath+"的下面!");
}
logger.debug("rootPath:" + rootPath);
/**
* 1.如果ContextPath为空,则rootPath+RequestURI的父级决定config.json位置
* 2.如果ContextPath为空不为空 originalPath = this.rootPath + uri.substring(contextPath.length());
* originalPath.getParentFile()+config.json即为最终完整config.json路径
*/
try {
String exec = new ActionEnter(new StorageManager(), request, rootPath, configPath).exec();
System.out.println("exec:" + exec);
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}

然后将config.json放到配置文件中​​${com.jane.configjson.baseFilePath}​​​的下面:
SpringBoot下thymeleaf使用UEditor_spring_05
这个路径就是项目跑的路径:
SpringBoot下thymeleaf使用UEditor_spring boot_06
但是此时还有另外一个问题,图片不能回显!


② 解决图片回显问题

图片上传成功,但是回显不了!
SpringBoot下thymeleaf使用UEditor_json_07

那么这时候就要搞清楚,图片到底保存到了哪里?

继续跟踪源码,图示如下:
SpringBoot下thymeleaf使用UEditor_自定义_08
很明显了,图片最终路径是rootPath+savePath!rootPath就是我们在controller传进去的,savePath就是UEditor从config.json读取imagePathFormat的值!
SpringBoot下thymeleaf使用UEditor_spring_09
服务器验证如下:
SpringBoot下thymeleaf使用UEditor_spring boot_10
而图片回显请求则是savePath+实际保存的文件名!那么很好说了,自定义controller拦截​​​/ueditor/jsp/upload​​前缀的请求进行文件下载处理即可!

第一步-修改UeditorController

exec方法执行结束后是返回一个json字符串,那么就可以从中对url进行替换。

String exec = new ActionEnter(new StorageManager(), request, rootPath, configPath).exec();
/**
* exec:{"state": "SUCCESS","original": "\u5b9e\u9a8c\u75301.jpg","size": "42389","title": "1580809982781059908.jpg",
* "type": ".jpg","url": "/ueditor/jsp/upload/image/20200204/1580809982781059908.jpg"}
*/
System.out.println("exec:" + exec);
JSONObject parse = JSON.parseObject(exec);
if(parse.containsKey("url")){
String oldUrl = parse.getString("url");
String urlNew="/ueditor/jsp/upload?filePath="+oldUrl;
parse.put("url",urlNew);
logger.debug("封装后的exec:"+parse);
}

第二步-自定义fileController处理上面的urlNew

@Value("${com.jane.configjson.baseFilePath}")
private String configJsonPath;

@RequestMapping("/ueditor/jsp/upload")
public ResponseEntity<byte[]> ueditorfileDown(HttpServletRequest request,String filePath){
logger.debug("filePath:"+filePath);
byte [] body = null;
String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static";
String requestURL = request.getRequestURL().toString();
if(requestURL.contains("127.0.0.1")||requestURL.contains("localhost")||requestURL.contains("192.168")){
logger.debug("本地环境");
}else{
rootPath=configJsonPath;
}
String fileUrl=rootPath+ File.separator+filePath;
try {
//获取到文件流
InputStream in = new FileSystemResource(fileUrl).getInputStream();
body = new byte[in.available()];
in.read(body);
} catch (IOException e1) {
logger.debug("文件读入出错,文件路径为:"+fileUrl);
e1.printStackTrace();
}
int index = filePath.lastIndexOf("/");
String fileName = filePath.substring(index+1);
logger.debug("本次下载的文件为:"+fileName);
//添加响应头
HttpHeaders headers = new HttpHeaders();
headers.add("Content-Disposition", "attachment;filename="+fileName);
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
HttpStatus statusCode = HttpStatus.OK;
ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(body, headers, statusCode);
return response;
}

最终效果如下图所示:
SpringBoot下thymeleaf使用UEditor_json_11


【3】指定文件上传路径与回显

其实,只要【2】弄清楚了,指定文件上传路径并回显就很简单了。核心要点:rootPath,configPath,savePath以及config.json配置内容!

这里不再赘述!