富文本编辑器java前后端如何交互

百度富文本编辑器在项目使用过程中遇到的问题

最近公司项目需要用到百度富文本编辑器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;
    }