最近公司需要使用ueditor上传图片,写了一个星期,现在记录一下。
1.官网下载ueditor ,地址:http://ueditor.baidu.com/website/download.html
2.下载之后将ueditor.jsp-jsp-lib下的jar包添加到maven中。在pom.xml中,如:
<dependency>
<groupId>com.baidu</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.2</version>
</dependency>
3.
4.如上图 :删除图标在ueditor.config.js---toolbars标签自定义图标,不需要的就直接删除就行。
5.因为是自定义路径,ueditor中的所有配置文件不需要修改,在你需要使用ueditor编辑器的页面加入:
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
//下面的代码是用来获取你在config.json中配置的 "imageActionName": "uploadimage"(官网配置没有改过), 将你配置的action替换成你需要访问的controller方法。
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
//alert(UE.Editor.prototype.getActionUrl+"====");
UE.Editor.prototype.getActionUrl = function(action) {
//alert(action+"---");
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
//alert(action+"--==--");
return 'http://localhost:9000/bicb/web/knowledge/knowPublish/saveImg';
} else if (action == 'uploadvideo') {
return 'http://localhost:9000/bicb/web/knowledge/knowPublish/savevideo';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
6.上面的代码很好理解,实在不行 你可以alert一下,一看就能明白
7.开始写controller中的方法。其实我们点击上传图片之后,我们可以看到请求发到自定义controller之后附加的几个东西,其中name="upfile"这个就是我们要上传的图片
官方文档可以查看后端的请求官方 如下:
8.现在目标就很明确了,只要能拼接好json串就可以了。
//图片上传
@RequestMapping(value="saveImg", produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public Map<String,Object> save(@RequestParam (value = "upfile", required = false) MultipartFile files, HttpServletRequest request,HttpServletResponse response){
Map<String,Object> map = new HashMap<String, Object>();
String realName = null;
knowFileVO VO = new knowFileVO();
String uuidName = null;
String realPath = null;
String roolPath = null;
try{
long size = files.getSize();
realName = files.getOriginalFilename();
//防止重名
uuidName = this.getUUIDFileName(files.getOriginalFilename());
//拿到本地路径
String staticPath = ResourcesUtil.getProperties("staticPath");
//图片保存项目路径
File directory = new File(staticPath);// 参数为空
if(!directory.exists() && !directory.isDirectory()) {
directory.mkdir();
}
realPath = directory.getCanonicalPath();
System.out.println(realPath);
真实路径
roolPath = request.getSession().getServletContext().getRealPath("/");
得到文件的输入流
InputStream in = new BufferedInputStream(files.getInputStream());
//获得文件的输出流
OutputStream out = new BufferedOutputStream(new FileOutputStream(new File(realPath,uuidName)));
IOUtils.copy(in, out);
in.close();
out.close();
//保存 know_file
int falg = saveKnowFileImge(VO);
if(flag!=0){
map.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
//map.put("url","http://localhost:9000/bicb/webapp/upload/"+uuidName); //能访问到你现在图片的路径
//System.out.println(efilePath);
map.put("url", viewPath);
map.put("title","");
map.put("original",realName );
}
} catch (ServiceException e) {
map.put("state", "文件上传失败!"); //在此处写上错误提示信息,这样当错误的时候就会显示此信息
map.put("url","");
map.put("title", "");
map.put("original", "");
e.printStackTrace();
}
return map;
}
}
//防止重名
private String getExtName(String s, char split) {
int i = s.lastIndexOf(split);
int leg = s.length();
return i > 0 ? (i + 1) == leg ? " " : s.substring(i+1, s.length()) : " ";
}
private String getUUIDFileName(String fileName){
UUID uuid = UUID.randomUUID();
StringBuilder sb = new StringBuilder(100);
sb.append(uuid.toString()).append(".").append(this.getExtName(fileName, '.'));
return sb.toString();
}
9.上传controller的代码不全,因为我上传的是我公司的服务器 代码有点长,我大概改了一下, 基本上思路就是upfile我们使用@RequestParam就可以之间拿到,所以就拿到他的属性,set到knowFileVO 类中(这段代码没写)。然后参数放到map中返回去就行。这个url,要和你本地存放图片的路径相同就行。
10.
11.如何删除在线搜索按钮和在线管理按钮。在image.html中注释掉如下两行,有的可能会报错,可以直接删除掉就可以了。