1. 程式人生 > >spring Boot + Ueditor整合

spring Boot + Ueditor整合

前陣子因專案需要,加入富文字編輯器,貨比三家還是決定使用度娘旗下的Ueditor,下載下的jsp版本單獨在tomcat上執行沒什麼問題,但在與springboot整合過程中出現了問題,研究了好久看了好多文件,總算是解決了。

主要問題是在配置資訊的獲取,前端未獲取到config.json檔案導致頁面在檔案/圖片上傳時無法進行,提示類似“配置資訊錯誤”(錯誤資訊有些忘了,大概這意思吧),不論把config.json檔案放在哪都無法使其自行獲取。

現在完整描述下我的整合與解決方案:

1、將ueditor專案複製到resourse下的static下;專案結構如圖:


2、此時,執行專案,訪問:http://lcoalhost:8080/index.html就可以訪問Ueditor的一個顯示編輯器的demo頁面了,此時使用上傳功能會發現頁面提示:“後端配置不正確”,實際上,當編輯器執行時,會向後端傳送一個請求獲取配置檔案,url定義在ueditor.config.js 的 serverUrl 中。

url預設為xxx/controller.jsp,既然只是獲取配置檔案,現在訪問原url無法獲取,那我們就索性寫個介面返回配置檔案內容好了:

/**
     * 富文字配置檔案獲取
     * @param request
     * @return
     */
    @RequestMapping(value = "/config",headers = "Accept=application/json")
    @ResponseBody
    public String imgUpload(HttpServletRequest request,HttpServletResponse response) {
        response.setContentType("application/json;charset=utf-8");
        String config = "/* 前後端通訊相關的配置,註釋只允許使用多行方式 */\n" +
                "{\n" +
                "    /* 上傳圖片配置項 */\n" +
                "    \"imageActionName\": \"uploadimage\", /* 執行上傳圖片的action名稱 */\n" +
                "    \"imageFieldName\": \"upfile\", /* 提交的圖片表單名稱 */\n" +
                "    \"imageMaxSize\": 2048000, /* 上傳大小限制,單位B */\n" +
                "    \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 上傳圖片格式顯示 */\n" +
                "    \"imageCompressEnable\": true, /* 是否壓縮圖片,預設是true */\n" +
                "    \"imageCompressBorder\": 1600, /* 圖片壓縮最長邊限制 */\n" +
                "    \"imageInsertAlign\": \"none\", /* 插入的圖片浮動方式 */\n" +
                "    \"imageUrlPrefix\": \"\", /* 圖片訪問路徑字首 */\n" +
                "    \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */\n" +
                "                                /* {filename} 會替換成原檔名,配置這項需要注意中文亂碼問題 */\n" +
                "                                /* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */\n" +
                "                                /* {time} 會替換成時間戳 */\n" +
                "                                /* {yyyy} 會替換成四位年份 */\n" +
                "                                /* {yy} 會替換成兩位年份 */\n" +
                "                                /* {mm} 會替換成兩位月份 */\n" +
                "                                /* {dd} 會替換成兩位日期 */\n" +
                "                                /* {hh} 會替換成兩位小時 */\n" +
                "                                /* {ii} 會替換成兩位分鐘 */\n" +
                "                                /* {ss} 會替換成兩位秒 */\n" +
                "                                /* 非法字元 \\ : * ? \" < > | */\n" +
                "                                /* 具請體看線上文件: fex.baidu.com/ueditor/#use-format_upload_filename */\n" +
                "\n" +
                "    /* 塗鴉圖片上傳配置項 */\n" +
                "    \"scrawlActionName\": \"uploadscrawl\", /* 執行上傳塗鴉的action名稱 */\n" +
                "    \"scrawlFieldName\": \"upfile\", /* 提交的圖片表單名稱 */\n" +
                "    \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */\n" +
                "    \"scrawlMaxSize\": 2048000, /* 上傳大小限制,單位B */\n" +
                "    \"scrawlUrlPrefix\": \"\", /* 圖片訪問路徑字首 */\n" +
                "    \"scrawlInsertAlign\": \"none\",\n" +
                "\n" +
                "    /* 截圖工具上傳 */\n" +
                "    \"snapscreenActionName\": \"uploadimage\", /* 執行上傳截圖的action名稱 */\n" +
                "    \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */\n" +
                "    \"snapscreenUrlPrefix\": \"\", /* 圖片訪問路徑字首 */\n" +
                "    \"snapscreenInsertAlign\": \"none\", /* 插入的圖片浮動方式 */\n" +
                "\n" +
                "    /* 抓取遠端圖片配置 */\n" +
                "    \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
                "    \"catcherActionName\": \"catchimage\", /* 執行抓取遠端圖片的action名稱 */\n" +
                "    \"catcherFieldName\": \"source\", /* 提交的圖片列表表單名稱 */\n" +
                "    \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */\n" +
                "    \"catcherUrlPrefix\": \"\", /* 圖片訪問路徑字首 */\n" +
                "    \"catcherMaxSize\": 2048000, /* 上傳大小限制,單位B */\n" +
                "    \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 抓取圖片格式顯示 */\n" +
                "\n" +
                "    /* 上傳視訊配置 */\n" +
                "    \"videoActionName\": \"uploadvideo\", /* 執行上傳視訊的action名稱 */\n" +
                "    \"videoFieldName\": \"upfile\", /* 提交的視訊表單名稱 */\n" +
                "    \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */\n" +
                "    \"videoUrlPrefix\": \"\", /* 視訊訪問路徑字首 */\n" +
                "    \"videoMaxSize\": 102400000, /* 上傳大小限制,單位B,預設100MB */\n" +
                "    \"videoAllowFiles\": [\n" +
                "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
                "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"], /* 上傳視訊格式顯示 */\n" +
                "\n" +
                "    /* 上傳檔案配置 */\n" +
                "    \"fileActionName\": \"uploadfile\", /* controller裡,執行上傳視訊的action名稱 */\n" +
                "    \"fileFieldName\": \"upfile\", /* 提交的檔案表單名稱 */\n" +
                "    \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */\n" +
                "    \"fileUrlPrefix\": \"\", /* 檔案訪問路徑字首 */\n" +
                "    \"fileMaxSize\": 51200000, /* 上傳大小限制,單位B,預設50MB */\n" +
                "    \"fileAllowFiles\": [\n" +
                "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
                "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
                "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
                "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
                "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
                "    ], /* 上傳檔案格式顯示 */\n" +
                "\n" +
                "    /* 列出指定目錄下的圖片 */\n" +
                "    \"imageManagerActionName\": \"listimage\", /* 執行圖片管理的action名稱 */\n" +
                "    \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\", /* 指定要列出圖片的目錄 */\n" +
                "    \"imageManagerListSize\": 20, /* 每次列出檔案數量 */\n" +
                "    \"imageManagerUrlPrefix\": \"\", /* 圖片訪問路徑字首 */\n" +
                "    \"imageManagerInsertAlign\": \"none\", /* 插入的圖片浮動方式 */\n" +
                "    \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 列出的檔案型別 */\n" +
                "\n" +
                "    /* 列出指定目錄下的檔案 */\n" +
                "    \"fileManagerActionName\": \"listfile\", /* 執行檔案管理的action名稱 */\n" +
                "    \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\", /* 指定要列出檔案的目錄 */\n" +
                "    \"fileManagerUrlPrefix\": \"\", /* 檔案訪問路徑字首 */\n" +
                "    \"fileManagerListSize\": 20, /* 每次列出檔案數量 */\n" +
                "    \"fileManagerAllowFiles\": [\n" +
                "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
                "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
                "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
                "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
                "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
                "    ] /* 列出的檔案型別 */\n" +
                "\n" +
                "}";
        return config;
    }

(那一長得噁心的要死的字串就是config.json就是配置檔案的內容)

獲取到了配置檔案就不存在“後端配置錯誤”這樣的資訊了。

3、當然,此時檔案上傳介面沒寫好,介面上不會提示錯誤,但還是無法實現上傳,上傳的邏輯我另外單獨寫了一篇博文:屠龍刀點選就送

而後只要在配置檔案中修改檔案上傳介面即可