springmvc學習筆記--ueditor和springmvc的集成

 

前言:
　　在web開發中, 富文本的編輯器真心很重要. 有電商店鋪的打理, 新聞稿/博客文章/論壇帖子的編輯等等, 這種所見即所的編輯方式, 大大方便了非技術人員從事互利網相關的工做.
　　由於手頭有個小項目, 正好涉及到這塊, 因此決心好好研究一番. 中間也在ckeditor和ueditor之間徘徊了好久, 後來聽聞大名鼎鼎的微信公衆號也使用了ueditor, 所以最後倒向了ueditor.
　　本文將講解如何集成springmvc+ueditor的一些要點, 並作下簡單的展望.

ueditor簡介:
    UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具備輕量，可定製，注重用戶體驗等特色，開源基於MIT協議，容許自由使用和修改代碼...
    ueditor的官網地址以下: http://ueditor.baidu.com/website/index.html.

　　

    因爲涉及到圖片上傳的部分, ueditor並不是純javascript版本, 其出了php, java, asp等語言的支持版本.
    源碼的下載連接: http://ueditor.baidu.com/website/download.html.

集成:
    ueditor的java版提供的是jsp版本的, 還附帶了多個java依賴包. 如下是它的目錄結構.

　　

    配置文件config.json, 定義了支持的上傳文件/圖片的接口, 以及限制, 這個很重要.
    而當前的web開發, 每每都是基於maven來組織構建web工程的. 同時因爲springmvc版本的框架限制. 仍是得有一方進行妥協, 或者說是修改.
    在這個的前提下, 咱們來進一步的地細化集成的工做.
    • 依賴包採用maven的方式來組織構建

    <!-- 上傳文件的支持 -->
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.1</version>
    </dependency>

    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.4</version>
    </dependency>

    <dependency>
        <groupId>commons-codec</groupId>
        <artifactId>commons-codec</artifactId>
        <version>1.10</version>
    </dependency>

    <!-- org.json -->
    <!--JSON is a light-weight, language independent, data interchange format. See http://www.JSON.org/-->
    <dependency>
        <groupId>org.json</groupId>
        <artifactId>json</artifactId>
        <version>20160212</version>
    </dependency>

    這樣就引入了文件上傳, 以及json序列化/反序列化處理的依賴包, ueditor-x.x.x.jar後面介紹.
    • 資源訪問配置
    單獨把ueditor放入到webapp目錄下, 所以在springmvc映射處理中須要排除.

<mvc:resources mapping="/ueditor/**" location="/ueditor/" />

    • 引入ueditor-x.x.x的源碼
    其實做爲依賴包引入也能夠, 只是引入源碼, 方便功能的修改和加強. 和前一種方法相比, 我更加推薦後者, 即引入源碼.

　　

    • 添加controller處理類

    @Controller
    @RequestMapping("/ued")
    public class UEditorController {

        @RequestMapping(value="/config")
        public void config(HttpServletRequest request, HttpServletResponse response) {

            response.setContentType("application/json");
            String rootPath = request.getSession()
                    .getServletContext().getRealPath("/");

            try {
                String exec = new ActionEnter(request, rootPath).exec();
                PrintWriter writer = response.getWriter();
                writer.write(exec);
                writer.flush();
                writer.close();
            } catch (IOException e) {
                e.printStackTrace();
            }

        }
    }

    該controller類照搬了ueditor中本來的controller.jsp的處理代碼, 並改爲springmvc的那種模式. 注意這邊的處理ueditor操做的url path爲: /ued/config. 它完成了編輯器初始化, 以及文件/圖片的上傳處理.

　　

    • 配置config.json文件
    config.json文件, 是定義文件/圖片上傳的接口, 以及各類限制(文件大小上限, MimeType類型框定).
    具體配置的細節並不重要, 這邊最重要的是: 放在那裏, 以及如何被讀取到?
    放的位置問題, 能夠自由點, 讓咱們霸道一回, 就把config.json文件放置到webapp/conf目錄下吧, ^_^.
    而後如何被讀取到呢? 原先ueditor的代碼, 默認指定了請求的Context Path. 緣由仍是在jsp版本中, 默認controller.jsp和config.json是同目錄.

    private String getConfigPath () {
        return this.parentPath + File.separator + ConfigManager.configFileName;
    }

    然而現狀已經發生變化了, 若不修改源碼會致使找不到配置文件config.json的錯誤. 由於尋找的路徑和和咱們設定的webapp/conf有出路.
    在類ConfigManager修改後爲:

    private String getConfigPath () {
        return this.rootPath
                + File.separator + "conf"
                + File.separator + ConfigManager.configFileName;
    }

    這樣就能夠了, 這也是爲何, 我推薦使用源碼引入的緣由, 這也是惟一一處必須須要修改的地方.
    • 修改ueditor.config.js
    這也是最後一個步驟了, 咱們須要制定編輯器訪問服務器的初始地址.

    window.UEDITOR_CONFIG = {

        //爲編輯器實例添加一個路徑，這個不能被註釋
        UEDITOR_HOME_URL: URL

        // 服務器統一請求接口路徑
        //      原先默認的
        //, serverUrl: URL + "jsp/controller.jsp"
        //      修改後的
        , serverUrl: "/ued/config"

    注: 修改serverUrl, 使得其指向本身的服務器地址.
    這樣整個ueditor和springmvc的集成配置工做就作完了, ^_^. 感受仍是有點趕鴨子上架, 卻沒有具體講述原理.

驗證:
    驗證過程, 相對比較簡單一些.
    引入編輯框代碼:

   <script src="/ueditor/ueditor.config.js"></script>
   <script src="/ueditor/ueditor.all.min.js"></script>
   <script src="/ueditor/lang/zh-cn/zh-cn.js"></script>

   <script id="container" name="content" type="text/plain">這裏寫你的初始化內容</script>
   <script type="text/javascript">
      var editor = UE.getEditor('container');
   </script>

   初始化後, 編輯框以下:
   

   上傳圖片操做後, 編輯框以下:

   OK, 很是的成功.

後記:
    在查閱網上資料的時候, 也見過其餘的集成方式的. 好比添加額外的servlet(path只匹配ueditor), 單獨處理ueditor的jsp. 這樣也能很好的作到集成, 也省心省力. 不過採用後者, 能夠修改圖片上傳的模式, 好比放置到專門的圖片服務器. 這也是服務作大的一個必經之路.
    後續有機會將講述下使用ueditor+圖片服務器的修改思路, 以及ueditor的定製工做. 但願本身能努力, good good study, day day up.

公衆號&遊戲站點:
　　我的微信公衆號: 木目的H5遊戲世界

　　我的遊戲做品集站點(尚在建設中...): www.mmxfgame.com,  也可直接ip訪問: http://120.26.221.54/.