springmvc集成xhEditor编辑器的使用

一.简介

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器。

二.用法

1.首先下载一个xheditor插件包，我这里讲解的是xheditor1.2.1版本的。

2.jsp中的配置

首先引入xheditor插件包下面的xheditor-1.2.1.min.js以及iframe.css以及ui.css

然后编辑器的配置：

<form action="###" method="post" >
<div>
<textarea class="editor" name="content" id="content" name="description" rows="20" cols="83" 
    upImgUrl="${contextPath }/management/signManager/upImg" upImgExt="jpg,jpeg,gif,png"></textarea>
</div>
</form>

 textarea中只要指定class="editor"就可以在页面上看到编辑器中自带的一些功能，然后 upImgUrl指定的为你上传图片处理的请求，upImgExt指定的为上传图片的格式。

3.后台处理图片上传

@RequestMapping(value = "/upImg", method = { RequestMethod.GET,
RequestMethod.POST })
public void upImg(Map<String, Object> map,MultipartFile  filedata,HttpServletRequest request,HttpServletResponse response) throws IOException {
response.setContentType("text/html; charset=UTF-8");
long maxSize = 0;
maxSize = 1024*1024;
String path = request.getSession().getServletContext().getRealPath("/upload"); 
String fileName = filedata.getOriginalFilename();  
Calendar calendar=Calendar.getInstance();
long newFileName= calendar.getTimeInMillis();
File targetFile = new File(path, newFileName+"");  
       if(!targetFile.exists()){  
           targetFile.mkdirs();  
       }  
       //保存  
       try {  
        filedata.transferTo(targetFile);  
        PrintWriter out = response.getWriter();
           String pathName=request.getContextPath()+"/upload/"+newFileName;
    System.out.println(pathName);
        out.println("{\"err\":\"\",\"msg\":\""+pathName+"\"}");//这里返回你图片上传路径，返回json到编辑器中，这样编辑器就能及时显示图片内容了
    out.flush();
    out.close();
       } catch (Exception e) {  
           e.printStackTrace();  
       }  

}