贈人玫瑰，手有余香
umeditor是ueditor的縮減版，對于日常的富文本來說已經(jīng)完全足夠了
環(huán)境
- jdk: 1.7
- maven web 新項目
- 框架：springMVC 4.3.10.RELEASE
- umeditor版本：
1.2.3 Jsp版本 UTF-8版
開始整合
1.解壓壓縮包，拷貝到webapp的自定義目錄下
由于我自己的項目是把所有的靜態(tài)資源（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); // 直接轉(zhuǎn)發(fā)到自己的controller層
// 注釋的部分，是他原來的代碼，umeditor默認(rèn)會把圖片直接存到tomcat所在的服務(wù)器上，但這并不是我想要的
// 我采用的圖片服務(wù)器是七牛，所以，他默認(rèn)提供的方法對我沒用，直接修改之
// 使用**轉(zhuǎn)發(fā)**的形式，直接轉(zhuǎn)發(fā)到我自己的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的規(guī)則:不為SUCCESS則顯示state的內(nèi)容
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 = {
...
//圖片上傳配置區(qū)，主要就是修改這里
,imageUrl:URL+"jsp/imageUp.jsp" // 圖片上傳提交地址
,imagePath:"" //上傳的圖片回顯的路徑前綴，
// umeditor渲染圖片展示是采用“前綴+相對地址”的形式
// 我的后臺返回的圖片路徑直接就是全路徑，所以我這里直接設(shè)置成空字符串！！
// 這里可以根據(jù)自己項目的實際情況修改。
,imageFieldName:"upfile"
// 圖片數(shù)據(jù)的后臺接收參數(shù)名，需要和后臺參數(shù)名的保持一致
// 例如：我這里是upfile，那么后臺的參數(shù)就是：@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，而導(dǎo)致圖片無法正常縮放～
另外，如果項目引用的是umeditor.min.css，那么就在umeditor.min.css中追加上面的css樣式
5.開始使用，在html的<head>中加入對應(yīng)的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保持一致
/* 傳入配置參數(shù),可配參數(shù)列表看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;">
這里可以寫你想寫的初始化內(nèi)容，不寫也可以
</script>
....其他html代碼...
</body>
6.獲取和設(shè)置編輯器的內(nèi)容
/* 獲取編輯器內(nèi)容，這里um是上一步中定義好的window.um，名字也可以自定義，只要保持一致就行 */
var html = um.getContent();
var txt = um.um.getContentTxt();
/* 設(shè)置編輯器內(nèi)容 */
um.setContent('要設(shè)置的編輯器內(nèi)容.');
