spring-boot整合kindeditor

最近在使用spring-boot製作一個簡單的小網站。spring-boot以程式碼註解的形式嵌入springMVC的配置，簡化了配置流程。開發過程使用的頁面模板是thymeleaf。下面簡要說一下整合kindeditor的過程中遇到的問題以及自己的解決方法：

頁面程式碼結構如下：

其中kindeditor資料夾存放kindeditor的所有檔案，kindeditor版本是4.1.10。

引用kindeditor

在頁面中使用最簡單的方式使用kindeditor。

        <form method="post" action="/blogs/add" role="form"
            class="form-horizontal">
            <div class="form-group">

                <div class="col-sm-offset-1 col-sm-10">
                    <input type="text" class="form-control" id="title" name="title"
                        placeholder="請輸入標題" />
                </div>
            </div>
            <div class="form-group">

                <div class="col-sm-offset-1 col-sm-10">
                    <textarea id="editor" name="content">
                        從這裡開始記錄我的美好時光
                    </textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-10">
                    <button type="submit" class="btn btn-default">儲存</button>
                </div>
            </div>
        </form>
        <script charset="utf-8" src="/kindeditor/kindeditor.js"></script>
        <script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
        <script>
            KindEditor.ready(function(K) {
                window.editor = K.create('#editor');
            });
        </script>

執行程式，可以看到kindeditor介面，嘗試著寫點東西，也能儲存成功。接下來點選上傳圖片按鈕，上傳一張小圖片，提交的時候報錯，/kindeditor/php/upload_json.php找不到。

配置上傳引數

看官方文件，原來還需要在kindeditor初始化的時候設定兩個引數，uploadJson和fileManagerJson，java版本的官方提供了兩個jsp，如下所示：

        <script>
            KindEditor.ready(function(K) {
                window.editor=K.create('#editor', {
                uploadJson : '/kindeditor/jsp/upload_json.jsp',
                fileManagerJson : '/kindeditor/jsp/file_manager_json.jsp',
                allowFileManager : true
                });         
            });
        </script>

再執行一次，上傳還是報錯，Chrome瀏覽器中Console可以看到http://localhost:8080/kindeditor/jsp/upload_json.jsp?dir=image Failed to load resource: the server responded with a status of 404 (OK)。怎麼會呢，upload_json.jsp明明就在那個資料夾下。
接著瀏覽器直接訪問該檔案，卻能直接看到jsp頁面原始碼，而不是編譯過後的html。

將jsp改成controller

原來是spring-boot在使用thymeleaf作為頁面模板時，會將jsp直接看成靜態檔案。
現在有兩種方法來解決這個問題，要麼讓spring-boot能夠解析jsp，要麼將jsp中的程式碼放到controller中實現。這裡使用第二種方法。
新建一個UploadController類，將upload_json.jsp和file_manager_json.jsp內容整合到UploadController裡。這裡參考了網上的經驗SpringMVC整合KindEditor上傳檔案的處理。
我將上傳和檔案管理的連結分別改成/fileUpload和/fileManager。
與此同時，將kindeditor初始化的js指令碼也更新一下。

        <script>
            KindEditor.ready(function(K) {
                window.editor=K.create('#editor', {
                uploadJson : '/fileUpload',
                fileManagerJson : '/fileManager',
                allowFileManager : true
                });         
            });
        </script>

再測試一次！
依然不行，單步除錯發現，以下程式碼處沒有獲取到上傳的檔案：

        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setHeaderEncoding("UTF-8");
        List items = upload.parseRequest(request);

修改上傳程式碼

繼續百度，得知spring有自己的一套上傳功能，於是再次改動程式碼，這次主要用到了MultipartHttpServletRequest這個類。
upload方法及引數：

@RequestMapping(value = "fileUpload", method = RequestMethod.POST)
    public void fileUpload(MultipartHttpServletRequest  request,
            HttpServletResponse response) throws ServletException, IOException,
            FileUploadException {

獲取檔案列表，遍歷檔案列表：

        List<MultipartFile> files = request.getFiles("imgFile");

        Iterator<MultipartFile> itr = files.iterator();
        while (itr.hasNext()) {
            MultipartFile item = itr.next();
            String fileName = item.getOriginalFilename();

再次測試，圖片終於上傳成功了！

附上UploadController.java