赠人玫瑰，手有余香
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("<script>"+ callback +"(" + result + ")</script>");
// }
%>
下面是我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<String, Object> returnMap = new HashMap<String, Object>();
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("<script>"+ callback +"(" + result + ")</script>");
}
}
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的<head>中加入对应的css，以及js，例如：
<head>
... 其他html代码...
<link rel="stylesheet" type="text/css" href="${base}/static/js/lib/umeditor/themes/default/css/umeditor.css">
<!-- 引用jquery -->
<script src="${base}/static/js/lib/umeditor/third-party/jquery.min.js"></script>
<!-- 引入 etpl -->
<script type="text/javascript" src="${base}/static/js/lib/umeditor/third-party/template.min.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="${base}/static/js/lib/umeditor/umeditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${base}/static/js/lib/umeditor/umeditor.js"></script>
<!-- 语言包文件 -->
<script type="text/javascript" src="${base}/static/js/lib/umeditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
$(function(){
window.um = UM.getEditor('container', { // container是编辑器容器的id，要和<body></body>中定义的容器的id保持一致
/* 传入配置参数,可配参数列表看umeditor.config.js */
toolbar: ['undo redo | bold italic underline']
});
});
</script>
... 其他html代码...
</head>
在<body></body>中，加入umeditor的编辑器容器，例如：
<body>
....其他html代码...
<!-- 加载编辑器的容器，id要和js中使用的id保持一致， name是为了form表单的提交-->
<script id="container" name="content" type="text/plain" style="width:600px;height:200px;">
这里可以写你想写的初始化内容，不写也可以
</script>
....其他html代码...
</body>
6.获取和设置编辑器的内容
/* 获取编辑器内容，这里um是上一步中定义好的window.um，名字也可以自定义，只要保持一致就行 */
var html = um.getContent();
var txt = um.um.getContentTxt();
/* 设置编辑器内容 */
um.setContent('要设置的编辑器内容.');
