记一次使用百度富文本编辑器ueditor遇到的各种问题

最新推荐文章于 2023-12-08 15:45:50 发布

原创

最新推荐文章于 2023-12-08 15:45:50 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ueditor百度富文本

本文详细介绍了百度富文本编辑器ueditor在项目中的集成过程及常见问题解决方案，包括所需jar包、前后端交互流程、图片上传功能实现等关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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