百度富文本編輯器在項目使用過程中遇到的問題
最近公司項目需要用到百度富文本編輯器,由于是第一次接觸,當前端人員告訴我這個東西需要后臺去配置的時候,我一臉蒙蔽,在這個過程中遇到了不少的坑,現記錄一下坑里需要注意的地方。
首先需要五個jar包。
-
-io (2.6版本),這個包在1點幾的版本里會導致的jar包不可用。
-codec
json --> org.json
還有一個是-1.1.2.jar
但是其實這個jar包不導也可以,直接把百度富文本編輯器里的目錄和里面的東西直接拖到項目里就可以了。
明白整個編輯器的請求流程是非常重要的:
在使用過程中百度編輯器 后端配置項沒有正常加載,上傳插件不能正常使用!,流程是這樣的,前端通過在..js里通過的地址請求后臺,調取.json文件里的各種配置項,如果前端拿不到,就會報:后臺HTTP配置沒有正常加載,上傳插件無法啟用。
前端頁面在加載富文本編輯器的時候,就會去后臺調接口,獲取json文件里的配置,如果json文件獲取不到,就會報后臺HTTP配置項沒有正常加載,上傳插件無法正常使用。
在處理這個問題的過程中,我通過后臺將配置文件返回給了前端,發現前端總是無法獲取。
查看請求的url百度編輯器 后端配置項沒有正常加載,上傳插件不能正常使用!,發現了一個問題:
前端在向后臺請求的時候,總是會攜帶一個的參數。發現此參數是用來做回調的。
于是在后臺代碼中,獲取參數,進行綁定:
@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數據格式:
但是圖片上傳功能還沒有完成。
繼續完成上傳功能.這里我們使用的是上傳圖片.
@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;
}