赠人玫瑰，手有余香
umeditor是ueditor的缩减版，对于日常的富文本来说已经完全足够了
环境
- jdk: 1.7
- maven web 新项目
- 框架：springMVC 4.3.10.RELEASE
- umeditor版本：
1.2.3 Jsp版本 UTF-8版
开始整合
1.解压压缩包，拷贝到webapp的自定义目录下
由于我自己的项目是把所有的静态资源（css、images、js、front）都放到了
webapp/static目录下，所以，我就把umeditor的所有东西都放到了webapp/static/js/lib/umeditor下面了
2.修改umeditor/jsp/imageUp.jsp，修改如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page import="com.common.util.upload.Uploader" %>
<%
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
request.getRequestDispatcher("/upload/ajaxUploadImgUM").forward(request, response); // 直接转发到自己的controller层
// 注释的部分，是他原来的代码，umeditor默认会把图片直接存到tomcat所在的服务器上，但这并不是我想要的
// 我采用的图片服务器是七牛，所以，他默认提供的方法对我没用，直接修改之
// 使用**转发**的形式，直接转发到我自己的controller层
// Uploader up = new Uploader(request);
// up.setSavePath("upload");
// String[] fileType = {".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp"};
// up.setAllowFiles(fileType);
// up.setMaxSize(2048000); //单位KB
// up.upload();
//
// String callback = request.getParameter("callback");
//
// String result = "{\"name\":\""+ up.getFileName() +"\", \"originalName\": \""+ up.getOriginalName() +"\", \"size\": "+ up.getSize() +", \"state\": \""+ up.getState() +"\", \"type\": \""+ up.getType() +"\", \"url\": \""+ up.getUrl() +"\"}";
//
// result = result.replaceAll( "\\\\", "\\\\" );
//
// if( callback == null ){
// response.getWriter().print( result );
// }else{
// response.getWriter().print("");
// }
%>
下面是我controller层的代码，返回的方式也是直接借鉴了imageUp.jsp~~
/**
* UMeditor使用七牛上传
* @param imgFile
* @throws IOException
*/
@RequestMapping("/ajaxUploadImgUM")
public void ajaxUploadImgUM(@RequestParam("upfile") MultipartFile imgFile,
HttpServletRequest request,
HttpServletResponse response) throws IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
// 获得后缀
String originalFilename = imgFile.getOriginalFilename();
String suffix = "jpg";
try {
suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
} catch (Exception e) {
}
String imagePath = uploadFileService.upload(imgFile.getBytes(), suffix);
Map returnMap = new HashMap();
returnMap.put("name", imagePath);
returnMap.put("originalName", originalFilename);
returnMap.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
returnMap.put("type", suffix);
returnMap.put("url", uploadFileService.getDomain() + imagePath); // 直接返回图片全路径
returnMap.put("size", imgFile.getSize());
String callback = request.getParameter("callback");
String result = JSON.toJSONString(returnMap);
if( callback == null ){
response.getWriter().print( result );
}else{
response.getWriter().print("");
}
}
3.修改 umeditor/umeditor.config.js文件，具体修改如下：
window.UMEDITOR_CONFIG = {
...
//图片上传配置区，主要就是修改这里
,imageUrl:URL+"jsp/imageUp.jsp" // 图片上传提交地址
,imagePath:"" //上传的图片回显的路径前缀，
// umeditor渲染图片展示是采用“前缀+相对地址”的形式
// 我的后台返回的图片路径直接就是全路径，所以我这里直接设置成空字符串！！
// 这里可以根据自己项目的实际情况修改。
,imageFieldName:"upfile"
// 图片数据的后台接收参数名，需要和后台参数名的保持一致
// 例如：我这里是upfile，那么后台的参数就是：@RequestParam("upfile") MultipartFile imgFile或者直接 MultipartFile upfile
...
}
4.修改umeditor/themes/default/css/umeditor.css文件，在文件的末尾增加如下代码：
/*解决Bootstrap引起的图片无法正常缩放的问题*/
.edui-container *{-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
.edui-container *:before,.edui-container *:after {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
加这个两个css样式主要是为了解决项目引入Bootstrap，而导致图片无法正常缩放～
另外，如果项目引用的是umeditor.min.css，那么就在umeditor.min.css中追加上面的css样式
5.开始使用，在html的
中加入对应的css，以及js，例如：
... 其他html代码...
... 其他html代码...
在
中，加入umeditor的编辑器容器，例如：
....其他html代码...
....其他html代码...
6.获取和设置编辑器的内容
/* 获取编辑器内容，这里um是上一步中定义好的window.um，名字也可以自定义，只要保持一致就行 */
var html = um.getContent();
var txt = um.um.getContentTxt();
/* 设置编辑器内容 */
um.setContent('要设置的编辑器内容.');