spring mvc中引入xheditor的步骤（一）

2019独角兽企业重金招聘Python工程师标准>>>

xheditor下载地址：http://xheditor.com

扔到WebContent/static/js/xheditor目录下，如图：

JSP表单中相应的代码如下,仅仅是个textarea,无需做任何更改：

<div class="control-group">
	<label class="control-label" for="content">内容:</label>
	<div class="controls">
		<sf:textarea path="content" rows="15" cssClass="span10"/>
	</div>
</div>

JSP头部加入如下CSS,JS

<c:set var="ctx" value="${pageContext.request.contextPath}" />
<script src="${ctx}/static/js/xheditor/1.1.14/xheditor-1.1.14-zh-cn.min.js" type="text/javascript"></script>
<style>
<!--
.xheDialog label {
	display: inline;
}
.form-horizontal .control-label {
	width: 80px;
}
.form-horizontal .controls {
	margin-left: 20px;
}
-->
</style>

<script type="text/javascript">
$(document).ready(function() {
	//初始化xhEditor编辑器插件  
	$('#content').xheditor({
		tools : 'full',
		skin : 'default',
		upImgUrl : "${ctx}/upload/image",
		upImgExt : "jpg,jpeg,png,gif",
		html5Upload : false,
		onUpload : insertUpload
	});
	
	//图片上传回调函数  
	function insertUpload(msg) {
		var _msg = msg.toString();
		//插入图片到编辑器
		$("#content").append(_msg);

		//以下步骤不是必须的，请跳过
		//(1)将图片地址保存到checkbox中
		$("#imagesDiv").append("<input type='checkbox' name='attachments' checked='checked' onclick='return false;' value='"+_msg+"''/>" + _msg+"<br>");
		//(2)插入图片到下拉列表
		$("#imageUrl").append("<option>" + _msg+"</option>");
	}
}

加入额外的CSS的原因，，是因为和bootstrap整合时，样式与xheditor冲突。。。

我们可以看到请求后台上传的url为

upImgUrl : "${ctx}/upload/image"

我们写个Spring Controller来处理它，代码如下

@Controller
@RequestMapping("/upload")
public class Upload {
	private static final Log logger = LogFactory.getLog(Upload.class);

	@RequestMapping(value = "/image", method = RequestMethod.POST)
	@ResponseBody
	public String image(
			HttpServletRequest request,
			HttpSession session,
			@RequestParam("filedata") MultipartFile file) throws Exception {

		// 将图片按日期分开存放，方便管理
		final String path_segment = "/upload/images/"
				+ DateUtil.getFormatedDate("yyyy/MM_dd");

		// 存放到web根目录下,如果日期目录不存在，则创建,
		// 注意 request.getRealPath("/") 已经标记为不推荐使用了.
		final String path = session.getServletContext().getRealPath("/") + path_segment;
		File dir = new File(path);
		if (!dir.exists()) {
			dir.mkdirs();
		}
		logger.info(path);

		// 以下是真正的上传部分
		String error = "";
		// 取得原文件名
		String originName = file.getOriginalFilename();
		// 取得文件后缀
		String fileExt = originName.substring(originName.lastIndexOf(".") + 1);
		// 按时间戳生成图片文件名
		String picture = DateUtil.getFormatedDate("yyyyMMddHHmmss") + "."+ fileExt;
		try {

			IOUtils.copy(file.getInputStream(), new FileOutputStream(new File(dir, picture)));

		} catch (Exception e) {
			logger.error("error:", e);
			error = e.getMessage();
		}

		// 将图片路径按xheditor要求的json格式字符串返回
		
		String url = "http://" + request.getServerName() //服务器地址  
                + ":"   
                + request.getServerPort()       //端口号  
                + request.getContextPath()      //项目名称  
                + path_segment + "/" + picture;	//upload/images/2012/11_09/20121109223012.jpg
		
		return "{\"err\":\"" + error + "\",\"msg\":\"" + url + "\"}";
	}
}

别忘了要开启spring mvc对上传的支持，*-servlet.xml中加入如下配置：

<!-- add file upload support -->
	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="defaultEncoding" value="UTF-8"></property>
		<property name="maxUploadSize" value="10240000000"></property>
	</bean>

OK，最终的效果如下：

转载于:https://my.oschina.net/uniquejava/blog/88321