写这篇文章的初衷,是为了帮助需要整合UMEditor到项目中,并且项目又用到了Spring Security的情况
这里主要阐述遇到的问题和解决的办法,希望对大家有参考价值,主要是对图片上传这块
1. X-Frame-Options:DENY的问题
后果:导致UMEditor无发提交上传图片的请求
解决方案:在Spring Security configure 类中加入:
protected void configure(HttpSecurity http) throws Exception {
http.headers()
.addHeaderWriter(new XFrameOptionsHeaderWriter(XFrameOptionsHeaderWriter.XFrameOptionsMode.SAMEORIGIN));
}
2.CSRF_TOKEN取不到的问题
后果:导致无法请求到服务端,Spring Security会在请求中加入CSRF_TOKEN, 如果没有,则会被服务端拒绝,报403错误
解决办法:(1)disable掉CSRF, 在configure类中加入
http.csrf().disable();
(2)修改UMEditor的image.js , 在动态创建提交image的form代码中加入
'<input type="hidden" name="_csrf" id="csrf" />'
之后再把token的值通过js代码设置进去:$('#csrf').val(token);
3. 上传图片一直失败的问题
后果:上传图片即使保存到后端,但是界面一直提示上传失败
解决办法:导致上传失败的问题可能是UMEditor的一个bug,在image.js找到如下代码
var json = eval('('+r+')');
Base.callback(me.editor, me.dialog, json.url, json.state);
在变了r中包含了<pre>标签,导致无法被转换成json,将代码改为
r=r.replace("<pre style=\"word-wrap: break-word; white-space: pre-wrap;\">", "").replace("</pre>", "");
var json = eval('('+r+')');
Base.callback(me.editor, me.dialog, json.url, json.state);
主要遇到的问题就这么多,如果有更好的解决方案,希望大家能提出来
最后在说下上传保存路径的问题,如果使用UMEditor自己的imageUp.jsp,将只能保存到工程目录下,如果想保存到其他地方,还是考虑上传时跳转到自己定义的Controller比较好,上传的URL可以在umeditor.config.js中修改imageUrl。