jfinal整合umeditor1.4.3.3
网上相同的资料也比较多,这里结合自己配置过程记录一下。代码直接使用jfinal自身的文件上传功能,编辑器提供的jsp、java代码、jar包都未使用。
http://ueditor.baidu.com/website/download.html 下载java版本。
把下载的utf8-jsp中的文件放入项目:
代码中引入相关css及js:
<link rel="stylesheet" type="text/css" href="/plugin/umeditor/themes/default/css/umeditor.css">
<script type="text/javascript" charset="utf-8" src="/plugin/umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugin/umeditor/umeditor.min.js"></script>
<script type="text/javascript" src="/plugin/umeditor/lang/zh-cn/zh-cn.js"></script>
放置编辑器的html:
<textarea name="myEditor2" id="myEditor2" style="width:100%;height:240px;margin: 2 auto;"></textarea>
生成编辑器的js:
<script type="text/javascript">
if($("head").html().indexOf("/umeditor/dialogs/link/link.js")>0){
UM.getEditor('myEditor2').destroy();//这段代码的作用是解决重新加载页面后编辑器不展现的问题
}
var um = UM.getEditor('myEditor2');
</script>
umeditor.config.js配置上传路径
,imageUrl:"/umeditor/fileUp"
,imagePath:"/"
,imageFieldName:"upfile"
Controller里处理上传的代码:
public class UmEditorAction extends Controller{
public void fileUp() {
UploadFile upFile = null;final String savePath = "/umeditor/upfile/"+Kit.format(new Date(),"yyyyMMdd")+"/";//这个format不用解释
Random random = new Random();
String newName = System.currentTimeMillis()+"_"+random.nextInt(10000);
try{
upFile = this.getFile("upfile",savePath,1024*1024*1024,"UTF-8");
newName=newName+Kit.getFileExt(upFile.getFileName());//获取文件后缀名
upFile.getFile().renameTo(new File(upFile.getUploadPath()+newName));/*重命名文件,注意:如果是新路径,必须先存在路径,否则此操作不会成功,这里是相同路径,不再进行文件是否存在及mkdirs的操作。*/
}catch(Exception e){
e.printStackTrace();
}
JSONObject json = new JSONObject();
json.put("name", upFile.getFileName());
json.put("originalName", upFile.getOriginalFileName());
json.put("size", upFile.getFile().length());
json.put("state", "SUCCESS");
json.put("type", upFile.getContentType());
json.put("url", "upload"+savePath+newName);//注意这句话,此为jfinal的存在的部分问题,getFile无视保存路径.
renderHtml(json.toJSONString());//网上有renderText,renderJson的写法,但这个版本只能用renderHtml
}
}
代码中取后缀名的getFileExt方法为:
public static String getFileExt(String fileName) {
return fileName.substring(fileName.lastIndexOf("."));
}
jfinal路由:me.add("/umeditor",UmEditorAction.class)
运行效果:
上传的文件:
注意,在jfinal中,存在文件上传时,也即html中使用了multipart/form-data时,必须先处理文件上传:UploadFile upFile=this.getFile(xxxxxxxxxx),否则无法获取到其它普通属性。我在代码里加了个Interceptor,如果判断存在multipart/form-data,先执行一下getFile,就可以避免以上问题。同时这个类也是统一的异常处理类。分享下:
public class ExceptionHd implements Interceptor {
@Override
public void intercept(Invocation ai) {
BaseAction action = (BaseAction) ai.getController();
HttpServletRequest request = action.getRequest();
//所有的上传居由/umeditor/fileUp处理,这里先做一层拦截处理是因为jfinal存在multipart/form-data提交数据时,需要先处理上传,否则无法获取普通属性。
String contentType=request.getContentType();
if(contentType!=null && contentType.startsWith("multipart/form-data")&&!request.getRequestURI().endsWith("/umeditor/fileUp")){
action.getFile("thisIsUselessCode");
}
try {
ai.invoke();
} catch (Exception e) {
e.printStackTrace();
//异常处理......................................
}
}
配置为:
public void configInterceptor(Interceptors me) {
me.add(new SessionInViewInterceptor());
me.add(new ExceptionHd());
}