umeditor 上传图片的配置

   官方介绍：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;}

本文为原创，转载请注明出处