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

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，最終的效果以下：