xheditor下载地址:http://xheditor.com javascript
扔到WebContent/static/js/xheditor目录下,如图: css
JSP表单中相应的代码以下,仅仅是个textarea,无需作任何更改: html
<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 html5
<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冲突。。。 java
咱们能够看到请求后台上传的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,最终的效果以下: web