SpringBoot中使用UEditor详细教程（针对文件上传问题）

向右看齐 2024-04-24 15:02 61阅读 0赞

**前言**  
UEditor是由百度推出的开源富文本编辑器，功能非常强大。以前用 SSM框架时曾用过一次，没什么问题，现在转为 springboot，在使用上传功能时遇到了问题（什么配置项不正确，上传功能无法使用），然后有找了一些资料，五花八门的，进过测试这里提出一种解决方法，可供参考。

### 下载 ###

地址：https://ueditor.baidu.com/website/download.html  
![下载][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70]  
下载完成后解压，得到 utf8-jsp 文件夹，将其重命名为 ueditor，再将其复制到你的 springboot 项目中  
（我的静态资源都配置放在 resources 下建的 static 文件夹中）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 1]  
然后重点关注一下 ueditor 文件夹下的 jsp 文件夹 和 ueditor.config.js 文件（后面用到）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 2]

> lib：uediotr依赖的jar包  
> config.json：上传功能的主要配置项  
> ueditor.config.js：完整配置项

### 使用 ###

**在你的项目中添加所需要的依赖：**

<dependency>
             	<groupId>commons-codec</groupId>
                <artifactId>commons-codec</artifactId>
                <version>1.9</version>
            </dependency>
            <dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>1.3.1</version>
            </dependency>
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.4</version>
            </dependency>
            <dependency>
                <groupId>org.json</groupId>
                <artifactId>json</artifactId>
                <version>20160810</version>
            </dependency>
            <dependency>
                <groupId>com.baidu.ueditor</groupId>
                <artifactId>ueditor</artifactId >
                <version>1.1.2</version>
                <scope>system</scope>
                <systemPath>${basedir}/src/main/resources/lib/ueditor-1.1.2.jar</systemPath >
            </dependency>

> ueditor-1.1.2.jar的引用我是在resources下建了个lib文件夹，再把 ueditor里lib下ueditor的jar包复制到这里面去  
> （但我后来把这个依赖去掉，发现也可以正常使用，所以这个jar包可以不引入）

**在页面引用ueditor（我的是thymeleaf）：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 3]

**最后实例化编辑器**

此时即可打开浏览器访问页面显示如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 4]  
注意：此时上传功能不正常，会出现 “后端配置项不正确，上传功能无法使用”的问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 5]

### 问题来源 ###

打开 ueditor.config.js，发现有一行代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 6]  
即请求过来了，它会走 controller.jsp，但是 springboot 默认是不支持 jsp 的，然而这个 jsp 它是指向 config.json 的，打开 config.json，第一个就是图片上传的相关配置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 7]  
所以就是 springboot 它无法访问 controller.jsp，也就无法读到 config.json 里的相关配置，所以报错。

### 解决办法 ###

> 思路：既然 springboot 无法通过 jsp 访问到 config.json，那就不走 jsp，直接让它获得 config.json 里的配置

**1. 新建一个Controller接口，内容如下**

/**
         * 上传配置：即不走config.json，模拟config.json里的内容，解决后端配置项不正确，无法上传的问题
         * @return
         */
        @RequestMapping("/ueditor/config")
        @ResponseBody
        public String uploadConfig() {
            String s = "{\n" +
                    "            \"imageActionName\": \"uploadimage\",\n" +
                    "                \"imageFieldName\": \"upfile\", \n" +
                    "                \"imageMaxSize\": 2048000, \n" +
                    "                \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" +
                    "                \"imageCompressEnable\": true, \n" +
                    "                \"imageCompressBorder\": 1600, \n" +
                    "                \"imageInsertAlign\": \"none\", \n" +
                    "                \"imageUrlPrefix\": \"\",\n" +
                    "                \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\" }";
            return s;
        }

**2. 修改 ueditor.config.js 里的 serverUrl 为上面定义的 url（部署时改为绝对路径）**  
![在这里插入图片描述][20190529133136778.png]  
**3. 后端定义你的文件上传接口（使用ueditor自带的上传是不现实的，注意返回格式参数）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 8]  
**4. 前端定义支持自定义上传（部署时改为绝对路径）**

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
           if (action == 'uploadimage'){
                return '/demand/upload'; /* 你自己的图片上传action */
            }else{
                return this._bkGetActionUrl.call(this, action);
            }
    };

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 9]  
此时，再访问页面，点击图片上传就没有报错了（后台是用 String 接收content，保存的是你图片的url）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 11]  
**5. 自定义工具栏**  
ueditor 可自定义需要的工具栏，默认是所有都显示，但实际中可根据需要定制，我这里没有上传视频等功能，所以可去除。  
官方文档： http://fex.baidu.com/ueditor/\#start-toolbar  
这是我筛选后的：  
![在这里插入图片描述][20190529142427558.png]  
至此，springboot 使用 ueditor 已完成，有需要的可进行参考，希望对你有帮助。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/e23f09c7574d4edaad7eb1d9f5d1d1c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/0b39f9c1149846e58bb3b7ce3b2e28ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/73301aaccac7443bae284be0be42817a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/45c9b12afab14d679227b993a729045e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/1b38eeea1e9c4b97a2faed028f9859b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/a461de6553fe4b21b58a0b754d7c8ed2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/65d7627a3f604ff8ae6d8411d3aefc6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/95a58216f3ca4ab5a8f77290744ffdbb.png
[20190529133136778.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/302d5f2d432c40758f01869c4e5e0d3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/8934b3c89a1a4c5b908e7498c180a4f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/488254889cc74dceaae7bfeebd59fa4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/a7d314d3fa1846ba9bb9a834f1fa7678.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzM3ODAz_size_16_color_FFFFFF_t_70 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/a82b613124c94e348f5411a13e1eb29f.png
[20190529142427558.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/919c5c5cae014d88988cb4d1780c76dc.png