springMVC与百度UEditor的整合

最新推荐文章于 2021-11-12 10:52:44 发布

Z_零点

最新推荐文章于 2021-11-12 10:52:44 发布

阅读量1.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zyc010/article/details/75270825

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、概述

因为要做一个文章发布系统，需要用到一个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();
	}

}

Z_零点

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
springMVC与百度UEditor的整合

一、概述因为要做一个文章发布系统，需要用到一个HTML在线编辑器，于是选择了UEditor。网上的文档不是很多，官网上介绍的也不全。结合网络上的代码和源码写了一个例子。二、实例1、springMVC 的配置，就不多介绍了。需要支持多文件上传的bean。 2、pom.xml中用到的jar包如下。 com.b
复制链接

扫一扫