一.简介
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();
}
}