贈(zèng)人玫瑰，手有余香

umeditor是ueditor的縮減版，對于日常的富文本來說已經(jīng)完全足夠了

環(huán)境

• jdk: 1.7
• maven web 新項(xiàng)目
• 框架：springMVC 4.3.10.RELEASE
• umeditor版本：1.2.3 Jsp版本 UTF-8版

開始整合

1.解壓壓縮包，拷貝到webapp的自定義目錄下

由于我自己的項(xiàng)目是把所有的靜態(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)會(huì)把圖片直接存到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渲染圖片展示是采用“前綴+相對地址”的形式
        // 我的后臺(tái)返回的圖片路徑直接就是全路徑，所以我這里直接設(shè)置成空字符串！！
        // 這里可以根據(jù)自己項(xiàng)目的實(shí)際情況修改。
        
        ,imageFieldName:"upfile"   
        // 圖片數(shù)據(jù)的后臺(tái)接收參數(shù)名，需要和后臺(tái)參數(shù)名的保持一致
        // 例如：我這里是upfile，那么后臺(tái)的參數(shù)就是：@RequestParam("upfile") MultipartFile imgFile或者直接 MultipartFile upfile
        ...
}

4.修改umeditor/themes/default/css/umeditor.css文件，在文件的末尾增加如下代碼：

/*解決Bootstrap引起的圖片無法正?？s放的問題*/
.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;}

加這個(gè)兩個(gè)css樣式主要是為了解決項(xiàng)目引入Bootstrap，而導(dǎo)致圖片無法正?？s放～
另外，如果項(xiàng)目引用的是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)容.');