springboot整合ueditor 后端篇（简洁版）

此文适合前后端分离的ueditor整合springboot，首先要理解ueditor只是个前端的js工具，绝大部分功能都是前端完成。

但是但是图片，视频等需要和后端交互的功能就需要稍微配置一下后端，让那些功能能使用。

1.前一篇文章已经搭建好了前端环境，但是显示后端配置出错，无法使用上传功能。出现这个错误的原因是，前端初始化编辑器时，从后端获取配置时出现错误（就是获取上传功能的配置）

 

2.从官网可以了解到，此时我们需要配置从后端获取配置参数的接口。所以我们需要找到ueditor编辑器的配置文件ueditor.config.js

打开后可以看到前面箭头指向的是官方的默认配置，后面被注释掉的是我加上的我本地的springboot用来获取配置的接口。所以把官方那个换成我的注释掉的那个就可以了。

3.再重新刷新页面，发现还是出现了错误。红色箭头分别指向的是上一步配置的接口调用和返回的参数，结果为 “配置文件初始化失败” 。如下图：

4.第三步的结果说明没有获取到config.json配置文件的内容，所以接下来的目标就是获取到配置文件的内容返回到前端即可。

首先我们把需要的配置文件放到资源目录下，配置文件可以从官网下载的文件内找到。

5.准备好了配置文件后就是写接口获取到配置文件的内容，返回给前端即可。

      5.1，接口的controller类方法

@RequestMapping("config")
public Object ueditorConfig(HttpServletRequest request, String callback, String action)  {

    switch (action) {
        case "config": // 此处即为获取配置文件的case
            String myresult = UeditorConfig.CONFIG.getConfigStr(callback);
            return myresult;
        case "uploadimage":

            return this.uEditorFileUpload(request);
    }
    log.error("【调用接口失败】，没有匹配到操作");
    return "【调用接口失败】，没有匹配到操作";
}

    5.2，配合使用的UeditorConfig枚举类

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;

public enum UeditorConfig {
    CONFIG();

    private JSONObject config;

    UeditorConfig() {
        StringBuilder config = new StringBuilder();

        try {
//此处即为获取配置文件，因为springboot的原因，目前我只能用流来获取文件内容
            InputStream stream = getClass().getClassLoader().getResourceAsStream("ueditorConfig/config.json");
            BufferedReader buff = new BufferedReader(new InputStreamReader(stream));
            String temp = null;
            while ((temp = buff.readLine()) != null) {
                config.append(temp);
            }
            //把配置文件中的注释去掉
            String configStr = config.toString().replaceAll("/\\*[\\s\\S]*?\\*/", "");
            this.config = JSON.parseObject(configStr);
        } catch (Exception e) {
            this.config = null;
        }
    }

    public JSONObject getConfig() {
        return config;
    }

    public String getConfigStr(String callback) {
        if (this.config == null)
            return (callback + "(读取配置文件失败);");
        return (callback + "(" + this.config.toJSONString() + ");");
    }
}

 

 6.到此所有的配置就完成了。此时会发现前端获取配置的请求返回了配置文件的内容，编辑器也没有报错。但是这种方式不能使用ueditor封装好的上传文件的代码，所以上传图片，文件等都要我们自己去实现。（虽然需要自己实现，但是ueditor封装的方式局限性比较大，所以这种场景反而更常见，我目前也是这样的方法。使用官方提供的方式虽然已经踩过了不少坑，但是仍然需要继续完善，等以后有时间了再更新。）