記一次使用百度富文本編輯器ueditor遇到的各種問題

百度富文本編輯器在項目使用過程中遇到的問題

最近公司項目需要用到百度富文本編輯器ueditor，由于是第一次接觸，目前端人員告訴我這個東西需要背景去配置的時候，我一臉蒙蔽，在這個過程中遇到了不少的坑，現記錄一下坑裡需要注意的地方。

首先需要五個jar包。

common-fileuoload

common-io (2.6版本)，這個包在1點幾的版本裡會導緻ueditor的jar包不可用。

commons-codec

json --> org.json

還有一個是ueditor-1.1.2.jar

但是其實這個jar包不導也可以，直接把百度富文本編輯器裡ueditor的目錄和裡面的東西直接拖到項目裡就可以了。

明白整個編輯器的請求流程是非常重要的:

在使用過程中，流程是這樣的，前端通過在ueditor.config.js裡通過serverUrl的位址請求背景，調取config.json檔案裡的各種配置項，如果前端拿不到，就會報：背景HTTP配置沒有正常加載，上傳插件無法啟用。

前端頁面在加載富文本編輯器的時候，就會去背景調接口，擷取json檔案裡的配置，如果json檔案擷取不到，就會報背景HTTP配置項沒有正常加載，上傳插件無法正常使用。

在處理這個問題的過程中，我通過背景controller将配置檔案傳回給了前端，發現前端總是無法擷取。

檢視請求的url，發現了一個問題：

前端在向背景請求的時候，總是會攜帶一個callback的參數。發現此參數是用來做回調的。

于是在背景代碼中，擷取參數，進行綁定：

@RequestMapping(value = "/ueditor/exec",method=RequestMethod.GET)
    @ResponseBody
    public Object exec(HttpServletRequest request,HttpServletResponse response) throws IOException {
        String path = request.getRealPath("/");

        String action = request.getParameter("action");
        String callback = request.getParameter("callback");

        if(action.equals("config")){
            LOGGER.info("線程ID<{}>收到百度富文本編輯器初始化請求",Thread.currentThread().getId());
            response.setContentType("application/json;charset-utf-8");
            request.setCharacterEncoding("utf-8");
            String exec = new ActionEnter(request, path).exec();
            String call = callback + "(" +exec + ")";
            //這裡之是以用PrintWriter對象，是因為springmvc裡配了消息轉換器之後，
            //使用@ResponseBody注解會将傳回的json字元串用\轉義，這樣前端無法解析
            PrintWriter writer = response.getWriter();
            try{
                writer.print(call);
            }catch (Exception e){
                e.printStackTrace();
            }finally {
                writer.close();
            }
            return null;
        }
        return null;
    }

           

這樣前端正常擷取到傳回的資料格式，沒有報錯了，圖檔上傳功能也能正常加載了。

傳回的json資料格式：

但是圖檔上傳功能還沒有完成。

繼續完成上傳功能.這裡我們使用的是fastDFS上傳圖檔.

@RequestMapping(value = "/ueditor/exec",method = RequestMethod.POST)
    @ResponseBody
    public Object exec(HttpServletRequest request,HttpServletResponse response,@RequestParam(value = "file",required = false) MultipartFile file) throws IOException{
        String userId = request.getParameter("userId");
        String token = request.getParameter("token");
        String domain = request.getParameter("domain");
        String action = request.getParameter("action");

        if((action.equals("uploadimage") || action.equals("uploadscrawl")) && !file.isEmpty() ){
            LOGGER.info("線程ID<{}>收到百度富文本編輯器上傳圖檔請求,圖檔檔案大小:{}",Thread.currentThread().getId(),file.getSize());

            	//具體的上傳業務，這裡我就不寫了，每個人的業務處理可能方式不一樣
                    JSONObject jsonObject = new JSONObject();
                    jsonObject.put("state","SUCCESS");
                    jsonObject.put("original",fileName);
                    jsonObject.put("size",file.getSize());
                    jsonObject.put("title",fileName);
                    jsonObject.put("type",replace);
                    jsonObject.put("url",url);
                    return jsonObject;
                }else {
                    return null;
                }
            }else {
                return null;
            }
        }
        return null;
    }