一、概述
因为要做一个文章发布系统,需要用到一个HTML在线编辑器,于是选择了UEditor。网上的文档不是很多,官网上介绍的也不全。结合网络上的代码和源码写了一个例子。
二、实例
2、pom.xml中用到的jar包如下。
因为要做一个文章发布系统,需要用到一个HTML在线编辑器,于是选择了UEditor。网上的文档不是很多,官网上介绍的也不全。结合网络上的代码和源码写了一个例子。
二、实例
1、springMVC 的配置,就不多介绍了。需要支持多文件上传的bean。
<!-- 支持文件上传 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="5242880"/>
</bean>
2、pom.xml中用到的jar包如下。
<dependency>
<groupId>com.baidu.ueditor</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.2</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20140107</version>
</dependency>
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
3、页面中jsp的配置,引用UEdior相关的js。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑</title>
<script type="text/javascript" charset="utf-8"
src="<%=baseUrl%>/js/uedit1.4/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
src="<%=baseUrl%>/js/uedit1.4/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8"
src="<%=baseUrl%>/js/uedit1.4/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<div>
<h5>测试11</h5>
<script id="editor" type="text/plain"
style="width: 1024px; height: 500px;"></script>
</div>
<script type="text/javascript">
/**访问后台action请求**/
var ue = UE.getEditor('editor');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage') {
return '<%=baseUrl%>/pub/uploadfile.do';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
</body>
4、后台上传文件代码
@Controller
@RequestMapping(value = "/pub")
public class UploadController {
@RequestMapping(value = "/uploadfile", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String, Object> uploadFile(
@RequestParam(value = "upfile", required = false) MultipartFile file,
HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> map = new HashMap<String, Object>();
String realName = null;
String uuidName = null;
String realPath = null;
try {
// 文件原来的名称
realName = file.getOriginalFilename();
// 得到这个文件的uuidname
uuidName = this.getUUIDFileName(file.getOriginalFilename());
// 图片保存的工程
realPath = request.getServletContext().getRealPath("/images");
// 得到文件的输入流
InputStream in = new BufferedInputStream(file.getInputStream());
// 获得文件的输出流
OutputStream out = new BufferedOutputStream(new FileOutputStream(
new File(realPath, uuidName)));
String rootPath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath();
IOUtils.copy(in, out);
in.close();
out.close();
// 将图片信息传递到我的数据库当中
int flag = 1;
if (flag != 0) {
map.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
map.put("url", rootPath+"/images/" + uuidName); // 能访问到你现在图片的路径
map.put("size", file.getSize());
map.put("type", file.getContentType());
map.put("original", realName);
JSONObject jsonObject = JSONObject.fromObject(map);
response.getWriter().write(jsonObject.toString());
response.getWriter().flush();
response.getWriter().close();
}
} catch (IOException e) {
map.put("state", "文件上传失败!"); // 在此处写上错误提示信息,这样当错误的时候就会显示此信息
map.put("url", "");
map.put("title", "");
map.put("original", "");
e.printStackTrace();
}
return null;
}
/**
* @Description: 取的uuidname防止文件同名问题
* @param @param s
* @param @param split
* @param @return
*/
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())
: " ";
}
/**
* @Description: 生成图片唯一编码
* @param @param fileName
* @param @return
*/
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();
}
}