java/springboot整合UEditor編輯器

官網下載jsp版ueditor放進項目，其實放在哪個目錄看項目習慣（有些按照網上的來就是路徑問題導致），主要是獲取配置的時候能找到相應的路徑。

 

頁面上引入相應js,加上<textarea id="editor" name="editor"></textarea>也可script方式

ueditor加載會去讀取：服務器統一請求接口路徑，默認為：serverUrl: URL + "jsp/controller.jsp"

加載時首先會以get方式去讀取配置信息（jsp/config.json里面的內容），然后再以post請求去上傳圖片或視頻（請求后面帶的參數會不一樣【get】http://xxxx/xx?action=config或者【post】http://xxxx/xx?action=uploadimage）

get請求不到的話會報：請求后台配置項http錯誤，上傳功能將不能正常使用！

 

 get請求到了但返回配置錯誤的話上傳會出錯：

需要注意的是jsp版本的，而使用的是spring boot，請求應該經過控制器，而不能直接去訪問這個jsp,當我們直接在瀏覽器輸入這個請求http://xxxx/ueditor/jsp/controller.jsp?action=config&&noCache=12342時你會發現，這成了一個下載鏈接，可以下載contoller.jsp。

所以注意如果不修改serverUrl: URL + "jsp/controller.jsp"那一定要保證controller.jsp能正常訪問且返回config.json里面的配置。

 返回格式一定需要是這樣：

 

在此提供兩種方式獲取config配置：

1.繼續使用讀取js/config.json目錄里的配置，修改ueditor.config.js中配置的服務器統一請求接口路徑serverUrl的值去后台執行方法獲取，如下：

后台方法（方法名自定義）：

這個rootPath是指向的是config.json所在的目錄（static/js/plugins/ueditor/jsp），spring boot中應該這樣修改才能獲取的到，然后用PrintWriter來輸出json格式的配置信息。那么這個方法就作為了ueditor向服務器發送請求的控制器了，從而取代了controller.jsp的作用

這個controller可以用現有的，也可新建。但一定要注意這個請求一定是http://xxxx/config不能是http://xxxx/file(或其他)/config，代碼如下：

@Controller
public class Config {
　　@RequestMapping(value="/config")
　　public void config(HttpServletRequest request, HttpServletResponse response) {
　　　　response.setContentType("application/json");
　　　　String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static/js/plugins/ueditor/jsp";
　　　　System.out.println(rootPath);
　　　　try {
　　　　　　String exec = new ActionEnter(request, rootPath).exec();
　　　　　　System.out.println(exec);
　　　　　　PrintWriter writer = response.getWriter();
　　　　　　writer.write(exec);
　　　　　　writer.flush();
　　　　　　writer.close();
　　　　} catch (IOException e) {
　　　　　　e.printStackTrace();
　　　　　　}
　　　　}
　　}

而不應該是這樣：

 后台方法還有一層/file

如果確要如此，必須滿足下面獲取路徑的條件。

因為跟蹤請求方法看：

 

ActionEnter方法里面有一個request.getRequestURI()：獲取請求的地址鏈接（瀏覽器中輸入的地址）與getConfigPath()【this.parentPath + File.separator + "config.json"】（會取上一層路徑）

且繼續執行會有：

結果： 

rootPath：/target/classes/static/js/plugins/ueditor/jsp

uri：/config

originalPath：/target/classes/static/js/plugins/ueditor/jsp/config

 

getConfigPath方法就能正確獲取到config.json地址：/target/classes/static/js/plugins/ueditor/jsp/config.json

而如果是 /file/config那獲取到的路徑：/target/classes/static/js/plugins/ueditor/jsp/file/config.json此路徑就會錯誤。

用此方式相應的當選擇了圖片post提交時候先判斷action

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
    // 如果觸發了下面三個動作中，則進行文件上傳操作
    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
        return Tools.ctxPath + '/file/uploadimage';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}
以此來完成自定義路徑上傳（當然方法可統一一個，根據action來判斷執行，如下）

2.不使用jsp/controller.jsp文件，直接從服務器處獲取配置文件：

 方法：

@RequestMapping("/uploadimage")
@ResponseBody
public Object uploadimage(@RequestParam(name = "action", required = false) String action,@RequestParam(name = "upfile", required = false) MultipartFile upfile, HttpServletRequest request) {
    JSONObject object = new JSONObject();
    if (action != null && action.equals("config")) {//獲取配置文件
        return JSONUtil.parse(UEditorUtil.UEDITOR_CONFIG);
    } else if (action != null && action.equals("uploadimage")) {//直接自定義上傳：oss
        if (upfile != null) {
            //{state：”數據狀態信息”，url：”圖片回顯路徑”，title：”文件title”，original：”文件名稱”}
            try {
                return ossUtil.uploadimage(upfile);
            } catch (Exception e) {
                e.printStackTrace();
                logger.error(e);
                object.put("state", "err");
                return object;
            }
        } else {
            object.put("state", "文件為空");
            return object;
        }
    } else {
        object.put("state", "不支持該操作");
        return object;
    }
}

UEditorUtil幫助類：（把config.json里面的配置直接寫成json字符串進行返回）

public class UEditorUtil {
    public final static String UEDITOR_CONFIG = "{" +
            "\"imageActionName\": \"uploadimage\"," +
            "\"imageFieldName\": \"upfile\"," +
            "\"imageMaxSize\": 2048000," +
            "\"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"]," +
            "\"imageCompressEnable\": true," +
            "\"imageCompressBorder\": 1600," +
            "\"imageInsertAlign\": \"none\"," +
            "\"imageUrlPrefix\": \"\"," +
            "\"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\"," +
            "" +
            "\"scrawlActionName\": \"uploadscrawl\"," +
            "\"scrawlFieldName\": \"upfile\"," +
            "\"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\"," +
            "\"scrawlMaxSize\": 2048000," +
            "\"scrawlUrlPrefix\": \"\"," +
            "\"scrawlInsertAlign\": \"none\"," +
            "" +
            "\"snapscreenActionName\": \"uploadimage\"," +
            "\"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\"," +
            "\"snapscreenUrlPrefix\": \"\"," +
            "\"snapscreenInsertAlign\": \"none\"," +
            "" +
            "\"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"]," +
            "\"catcherActionName\": \"catchimage\"," +
            "\"catcherFieldName\": \"source\"," +
            "\"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\"," +
            "\"catcherUrlPrefix\": \"\"," +
            "\"catcherMaxSize\": 2048000," +
            "\"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"]," +
            "" +
            "\"videoActionName\": \"uploadvideo\"," +
            "\"videoFieldName\": \"upfile\"," +
            "\"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\"," +
            "\"videoUrlPrefix\": \"\"," +
            "\"videoMaxSize\": 102400000," +
            "\"videoAllowFiles\": [" +
            "\".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\"," +
            "\".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"]," +
            "" +
            "\"fileActionName\": \"uploadfile\"," +
            "\"fileFieldName\": \"upfile\"," +
            "\"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\"," +
            "\"fileUrlPrefix\": \"\"," +
            "\"fileMaxSize\": 51200000," +
            "\"fileAllowFiles\": [" +
            "\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"," +
            "\".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\"," +
            "\".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"," +
            "\".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\"," +
            "\".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"" +
            "]," +
            "" +
            "\"imageManagerActionName\": \"listimage\"," +
            "\"imageManagerListPath\": \"/ueditor/jsp/upload/image/\"," +
            "\"imageManagerListSize\": 20," +
            "\"imageManagerUrlPrefix\": \"\"," +
            "\"imageManagerInsertAlign\": \"none\"," +
            "\"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"]," +
            "" +
            "\"fileManagerActionName\": \"listfile\"," +
            "\"fileManagerListPath\": \"/ueditor/jsp/upload/file/\"," +
            "\"fileManagerUrlPrefix\": \"\"," +
            "\"fileManagerListSize\": 20," +
            "\"fileManagerAllowFiles\": [" +
            "\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"," +
            "\".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\"," +
            "\".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"," +
            "\".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\"," +
            "\".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"" +
            "] " +
            "" +
            "}";

    /**
     * Ueditor的返回狀態類型
     */
    public enum UeditorMsg {
        SUCCESS("SUCCESS"), ERROR("上傳失敗");
        private String v;

        UeditorMsg(String v) {
            this.v = v;
        }

        public String get() {
            return this.v;
        }
    }
}

注意上傳成功后的返回格式：

JSONObject object=new JSONObject();
object.put("url", "");//這個url是前台回顯路徑（回顯路徑為config.json中的imageUrlPrefix+此處的url）
object.put("state", "SUCCESS");
object.put("original", "");
object.put("title", "");

 最后具體怎樣引入依賴項-百度