SpringBoot中使用UEditor详细教程（针对文件上传问题）_ueditor在表单中的提交 springboot

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

下载

地址：https://ueditor.baidu.com/website/download.html

下载完成后解压，得到 utf8-jsp 文件夹，将其重命名为 ueditor，再将其复制到你的 springboot 项目中
（我的静态资源都配置放在 resources 下建的 static 文件夹中）

然后重点关注一下 ueditor 文件夹下的 jsp 文件夹 和 ueditor.config.js 文件（后面用到）

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

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

<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.min.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
1
2
3

<script id="editor" type="text/plain" name="content" style="width:95%;height:450px;"></script>
1

最后实例化编辑器

<script>
//实例化编辑器
var ue = UE.getEditor('editor', {
    });
</script>
1
2
3
4
5

此时即可打开浏览器访问页面显示如下：

注意：此时上传功能不正常，会出现 “后端配置项不正确，上传功能无法使用”的问题

问题来源

打开 ueditor.config.js，发现有一行代码：

即请求过来了，它会走 controller.jsp，但是 springboot 默认是不支持 jsp 的，然而这个 jsp 它是指向 config.json 的，打开 config.json，第一个就是图片上传的相关配置：

所以就是 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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2. 修改 ueditor.config.js 里的 serverUrl 为上面定义的 url（部署时改为绝对路径）

3. 后端定义你的文件上传接口（使用ueditor自带的上传是不现实的，注意返回格式参数）

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);
        }
};
1
2
3
4
5
6
7
8

此时，再访问页面，点击图片上传就没有报错了（后台是用 String 接收content，保存的是你图片的url）


5. 自定义工具栏
ueditor 可自定义需要的工具栏，默认是所有都显示，但实际中可根据需要定制，我这里没有上传视频等功能，所以可去除。
官方文档： http://fex.baidu.com/ueditor/#start-toolbar
这是我筛选后的：

至此，springboot 使用 ueditor 已完成，有需要的可进行参考，希望对你有帮助。