|
官方介绍：UMeditor,简称UM,是为满足广大门户网站对于简单发帖框，或者回复框需求所定制的在线富文本编辑器。 UM的主要特点就是容量和加载速度上的改变，主文件的代码量为139k，而且放弃了使用传统的iframe模式，采用了div的加载方式， 以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧，贴吧每天几亿的pv是对UM各种指标的最好测试平台。 当然随着代码的减少，UM的功能对于UE来说还是有所减少，但我们经过调研和大家对于UM提出的各种意见，提供了现在UM的功能版本， 虽然有删减，但也有增加，比如拖拽图片上传，chrome的图片拖动改变大小等。让UM能在功能和体积上达到一个平衡。
官网：https://ueditor.baidu.com/website/umeditor.html
推荐使用 umeditor1_2_2-utf8-jsp版本，umeditor1_2_3-utf8-jsp好像字体和字号大小失效，具体情况不知，我是用的umeditor1_2_2-utf8-jsp版本，大家可以到官网去下载https://ueditor.baidu.com/website/download.html，也可以到下面的链接去下载https://download.csdn.net/download/qq_39098505/10857039
官网有基本的配置，这里不多说，直接讲讲怎么上传图片：
首先在umeditor根目录下找到umeditor.config.js文件，找到
//图片上传配置区
,imageUrl:URL+"jsp/imageUp.jsp" //图片上传提交地址
,imagePath:URL + "jsp/" //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
,imageFieldName:"upfile" //图片数据的key,若此处修改，需要在后台对应文件修改对应参数
然后修改图片上传的配置
imageUrl:path+"/umeditor/upload" //这里配置后台图片的接收路径，用来接收图片
imagePath:"" //图片修正地址，有时候我们调用图片时，如配置了tomcat虚拟路径要调整时使用，如果没有，建议为空
imageFieldName:"upfile" //后台接收的参数名称，默认是upfile,和后台需要对应，不然会出错
上述配置完成会后，当你在umeditor选择图片后就会执行imageUrl中的方法
接下来写后台的controller,直接上代码好了
@RequestMapping("/umeditor/upload")
@ResponseBody
public void umeditorUpload(@RequestParam("upfile") MultipartFile file,HttpServletRequest request,HttpServletResponse response)
throws IllegalStateException, IOException{
String path = request.getServletContext().getRealPath("/WEB-INF/static/image/umeditor")+"\\";
JSONObject json = new JSONObject();
String type="."+file.getOriginalFilename().split("\\.")[1];
String name=System.currentTimeMillis()+file.getOriginalFilename();
File dir = new File(path, name);
String src="image/umeditor/"+name;
if (!dir.exists()) {
dir.mkdirs();
json.put("state","SUCCESS");
json.put("original",file.getOriginalFilename());
json.put("size",file.getSize());
json.put("url",src);
json.put("title", name);
json.put("type",type);
} else {
json.put("state","FALSE");
}
file.transferTo(dir);
response.setContentType("text/html; charset=UTF-8");
PrintWriter writer=response.getWriter();
writer.write(json.toString());
writer.close();
}
和普通的图片上传差别不是很大，但是有几点要注意：
1.返回的json数据格式如下：
{
"state": "SUCCESS",
"original": "80px - \u526f\u67.jpg",
"size": "13252",
"title": "1465.jpg",
"type": ".jpg",
"url": "/ueditor/jsp/upload/image/20112/146075274.jpg"
}
2.不能直接return json格式的数据，如果直接返回json格式的数据，浏览器会出现下载的情况，要设置到respone响应头中返回。
3.后台接收@RequestParam("upfile") MultipartFile file，参数要和imageFieldName中配置的相同。
4.返回的url就是图片的路径，如果配置了tomcat的虚拟路径记得调整，可以配合imagePath调整图片地址，图片可以保存到任何地方，只要url指向正确就可以了。
到这里功能就基本完成了，效果图如下：
可以看到上传成功并显示了。
对上传的图片进行缩放，可能会出现只能缩小不能放大，或只能放大，不能缩小的情况，找到umeditor/themes/default/css/umeditor.min.css，在umeditor.min.css文件最后添加一段css即可
.edui-container *{-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
.edui-container *:before,.edui-container *:after {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
本文为原创，转载请注明出处 | 
转播
