版本: ueditor 1.4.3.3 jsp utf-8
spring mvc 4.0.2(是spring+springmvc+mybatis maven 项目)
1. 官网下载ueditor1_4_3_3-utf8-jsp.zip后,解压放到项目里,如src/main/webapp下。
2. 前端页面中导入js文件,并实例化一个编辑器:
<!-- 配置文件 -->
<script type="text/javascript" src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
//实例化编辑器
var ue = UE.getEditor('editor');
</script>
<div>
<script id="editor" type="text/plain" style="width:700px;height:300px;"></script>
</div>
(复制粘贴到src/main/webapp/WEB-INF/lib下,项目右键 - Properties - Java Build Path - Libraries - add jars)
4. ueditor1_4_3_3-utf8-jsp/utf-8/jsp下的controller.jsp放到项目WEB-INF/jsp中,后台写:
@RequestMapping("/ueditorController")
public String ueditorController(HttpServletRequest request,Model model){
return "controller";
}
(controller.jsp里的代码弄进后台控制器里,编辑器居然会报错。。)
5. 修改ueditor.config.js中的serverUrl值,如:
serverUrl: "http://localhost:8080/myproject/ueditorController"
把config.json也放到WEB-INF/jsp中,并根据自己的项目修改里面配置信息,如,上传图片部分中:
"imageUrlPrefix": "http://localhost:8080/myproject", /* 图片访问路径前缀,如果没有配置,则上传图片后前端编辑器里可能显示不了图片 */
"imagePathFormat": "/uploadfile/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
6. 如果是spring mvc,会跟ueditor的BinaryUploader.java发生冲突,导致编辑器报“未找到上传数据”。
解决方法:修改ueditor完整源码中BinaryUploader类的save方法后编译,把原ueditor-1.2.2.jar中的BinaryUploader.class文件换掉,重新导入jar包。
BinaryUploader.java中save方法:
public static final State save(HttpServletRequest request, Map<String, Object> conf) {
boolean isAjaxUpload = request.getHeader("X_Requested_With") != null;
if (!ServletFileUpload.isMultipartContent(request)) {
return new BaseState(false, 5);
}
ServletFileUpload upload = new ServletFileUpload(
new DiskFileItemFactory());
if (isAjaxUpload) {
upload.setHeaderEncoding("UTF-8");
}
try {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
String savePath = (String) conf.get("savePath");
String originFileName = multipartFile.getOriginalFilename();
String suffix = FileType.getSuffixByFilename(originFileName);
originFileName = originFileName.substring(0,originFileName.length() - suffix.length());
savePath = savePath + suffix;
long maxSize = ((Long) conf.get("maxSize")).longValue();
if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
}
/***********/
//自定义
savePath = PathFormat.parse(savePath, originFileName);
String [] savePathBySplit_temp = savePath.split("/");
String temp = "";
String fileName = savePathBySplit_temp[savePathBySplit_temp.length-1];
for(int i = 1;i < savePathBySplit_temp.length-1; i++){
if(i!=savePathBySplit_temp.length-2){
temp+=savePathBySplit_temp[i]+"/";
}else{
temp+=savePathBySplit_temp[i];
}
}
String pathTemp = request.getSession().getServletContext().getRealPath(temp);
//System.out.println(pathTemp+","+fileName);
//System.out.println(new File(pathTemp).exists());
File targetFile = new File(pathTemp);
if(!targetFile.exists()){
targetFile.mkdirs();
}
//System.out.println(new File(pathTemp).exists());
/************/
//State storageState = StorageManager.saveFileByInputStream(multipartFile.getInputStream(),savePath, maxSize);
State storageState = StorageManager.saveFileByInputStream(multipartFile.getInputStream(),pathTemp+"/"+fileName, maxSize);
if (storageState.isSuccess()) {
storageState.putInfo("url", PathFormat.format(savePath));
storageState.putInfo("type", suffix);
storageState.putInfo("original", originFileName + suffix);
}
return storageState;
}catch (Exception e) {
e.printStackTrace();
System.out.println(e.getMessage());
}
return new BaseState(false, AppInfo.IO_ERROR);
}
(SpringMVC Ueditor1.4.3 未找到上传数据:http://www.cnblogs.com/vincent4code/p/5809858.html)
7. form表单提交编辑器内容,后台可以用 request.getParameter("editorValue") 接收,并存到数据库中。