springboot thymeleaf 整合 百度富文字編輯器UEditor進行圖片上傳

專案中需要使用到富文字編輯器，找來找去發現百度UEditor富文字編輯器在國內最為常用因此就嘗試引入。編輯器官網是：http://ueditor.baidu.com/website/index.html ， 開發文件和js包可以從這裡找到。

下面開始介紹開發過程：

1. 引入富文字編輯器UEditor

   
   
   

   編輯器js檔案引入的靜態目錄
   
   

   將所有下載好的js包（官方有jsp、php等幾個版本的包，我下載的是jsp的）放入resources目錄下的static下，我在裡面建立了個js目錄，下面又搞了個ueditor包用於存放所有編輯器js。

2. 頁面中引入編輯器
   <div class="form-group">
   <label for="title" class="col-md-2 control-label">新聞詳情</label>
   <div class="col-md-10" style="width: 100%;">
   <script id="editor" name="detailContent" type="text/plain" style="width:100;height:500px;"></script>
   </div>
   </div>

引入相關js檔案：

<script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.all.min.js"> </script>
<!--建議手動加在語言，避免在ie下有時因為載入語言失敗導致編輯器載入失敗-->
<!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別，比如你在配置專案裡配置的是英文，這裡載入的中文，那最後就是中文-->
<script type="text/javascript" charset="utf-8" src="/js/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.js"></script>

其中/js/ueditor/ueditor.js是我根據官方demo中封裝的一些方法，方便使用而已，可有可無。

測試開啟頁面應該已經有了編輯器展示了。

3. 編輯器配置檔案修改
   為了後續可以上傳等與後臺互動的操作，需要修改下統一配置檔案，就是剛引入的ueditor.config.js,
   我這裡主要改動了兩個地方：
   a. 伺服器地址
   b. 工具項配置
   如下：

    window.UEDITOR_CONFIG = {

        //為編輯器例項新增一個路徑，這個不能被註釋
        UEDITOR_HOME_URL: URL

        // 伺服器統一請求介面路徑
        // , serverUrl: URL + "jsp/controller.jsp"
        , serverUrl: "http://localhost:8081/admin/imgUpload2"
        //工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的例項時選擇自己需要的重新定義
        , toolbars: [[
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough',  'removeformat', 'formatmatch', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
            'simpleupload', 'insertimage',  'insertvideo', 'music', 'attachment', 'map', '|',
            'horizontal', 'date', 'time',  '|',
            'print', 'preview', 'searchreplace'
        ]]

其中serverUrl是伺服器地址，這個地址要是錯誤，會使得本地圖片上傳的地方無法使用。而該方法返回的是一組JSON格式的配置。我參照著原來jsp例子中的結果直接返了個JSON：

@RequestMapping(value = "/imgUpload2")
    @ResponseBody
    public String imgUpload(HttpServletRequest request) {
        String config = "{\n" +
                "videoMaxSize: 102400000,\n" +
                "videoActionName: \"uploadvideo\",\n" +
                "fileActionName: \"uploadfile\",\n" +
                "fileManagerListPath: \"/ueditor/jsp/upload/file/\",\n" +
                "imageCompressBorder: 1600,\n" +
                "imageManagerAllowFiles: [\n" +
                "\".png\",\n" +
                "\".jpg\",\n" +
                "\".jpeg\",\n" +
                "\".gif\",\n" +
                "\".bmp\"\n" +
                "],\n" +
                "imageManagerListPath: \"/ueditor/jsp/upload/image/\",\n" +
                "fileMaxSize: 51200000,\n" +
                "fileManagerAllowFiles: [\n" +
                "\".png\",\n" +
                ...
                ...

json具體參見引入的jsp包下的config.json,原樣返回即可。
有了這個介面，當我們點選本地圖片上傳控制元件時，應該就可以彈出檔案選擇器，選擇本地圖片了。但是此時選好圖片後，檔案實際是上傳不了的，因為我們還得重新寫一個我們自己的圖片上傳介面。

4. 圖片上傳介面及設定
   圖片上傳介面程式碼：

    @RequestMapping(value = "/imgUpload3")
    @ResponseBody
    public String imgUpload3(MultipartFile upfile) {
        String path = this.imgUpload(upfile).getData();
                String config =
                "{\n" +
                "            \"state\": \"SUCCESS\",\n" +
                "                \"url\": \"http://localhost:8081/upload/"+path+"\",\n" +
                "                \"title\": \"path\",\n" +
                "                \"original\": \"path\"\n" +
                "        }";
        return config;
    }

其中this.imgUpload(upfile).getData()這個方法是之前寫的springboot進行檔案上傳的介面，見：http://www.jianshu.com/p/a839637710f9 ， getData方法返回了圖片的路徑，
而這個介面中返回的json格式是官方api中規定的，見官方文件：http://fex.baidu.com/ueditor/#dev-request_specification 。
好了本地圖片上傳的介面已經寫好了，最後就是設定一下編輯器的上傳圖片請求路徑。
在前端頁面中加入：

        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
                return 'http://localhost:8081/admin/imgUpload3';
            } else if (action == 'uploadvideo') {
                return 'http://a.b.com/video.php';
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        }

好了，現在應該可以在編輯器中進行完整的圖片上傳了操作了。