Spring Boot 整合配置 UEditor

  UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。今天就给大家分享关于Spring Boot 整合配置 UEditor的一些简单使用。

  演示代码借鉴了官方提供的源码，首先的去下载源码(地址)，官方文档，注意，需要下载完整源码，和对应的语言的源码，我是在做java开发的所以我选择JSP版本下载。源码版本是为了使用里面的java文件，而后来发现在源码版本中没有ueditor.all.min.js文件，而在前端是需要引入这个js文件的，所以需要再把jsp版本下载下来，该版本中有该js文件。

  然后搭建Spring Boot项目，搭建项目这个问题既然都看到这儿说明项目搭建应该是没啥问题的了，所以这里不在讲解，导入依赖

# 导入依赖
  <dependency>
     <groupId>com.gitee.qdbp.thirdparty</groupId>
     <artifactId>ueditor</artifactId>
     <version>1.4.3.3</version>
  </dependency>

  然后导入项目源码，放置在相应的位置

1. 将 config.json 放置在 resources 目录下的static目录下
2. 将下载的JSP源码，除了jsp的文件夹之外，其余的文件和文件夹复制到前端项目中的static用于存放静态文件的目录下
3. 大概的目录结构如下图，源码都是引用的官方的，没有经过更改，导入后注意index.html中js的路径问题
   
     前端就先这样，然后编写后端控制层的代码，这里先做简单的演示功能

import com.baidu.ueditor.ActionEnter;
import org.springframework.util.ClassUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@RestController
@RequestMapping("/")
public class UEditorApi {
    /**
     * 通过后端跳转到主页
     *
     * @return
     */
    public String home() {
        return "index";
    }

    /**
     * uedtior的配置和上传
     *
     * @param request
     * @param response
     * @param action   需要执行的操作，通过config.json中的imageActionName属性来执行，如果action=config，则表示执行读取config.json内容
     * @param upfile   需要上传的文件
     * @throws IOException
     */
    @RequestMapping("/config")
    public void config(HttpServletRequest request, HttpServletResponse response, String action, MultipartFile upfile) throws IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("application/json");
        //获取config.json的路径
        String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static";
        //执行上传，并返回路径
        String path = new ActionEnter(request, rootPath).exec();
        //将返回的路径返回至ueditor
        PrintWriter writer = response.getWriter();
        writer.write(path);
        writer.flush();
        writer.close();
    }
}

  注意，还需要修改上传文件的大小，因为默认的Spring Boot的最大值好像是10485760b，大约10M，虽然在config.json设置了上传大小，但是超过了Spring Boot的限制依旧会失败，所以在启动类中根据需求去设置上传的大小(如果默认大小够用，可以不进行此项)

    /**
     * 设置上传文件大小
     * @return
     */
    @Bean
    public MultipartConfigElement multipartConfigElement(){
        MultipartConfigFactory factory = new MultipartConfigFactory();
        //单个文件上传大小
        factory.setMaxFileSize(DataSize.ofMegabytes(10485760*5));
        //总文件上传大小
        factory.setMaxRequestSize(DataSize.ofMegabytes(10485760*10));
        return factory.createMultipartConfig();
    }

  完成上面的设置现在就开始测试配置是否正确，在浏览器中去请求ueditor的配置接口去读取配置http://localhost:8080/config?action=config(传值"action=config"是去读取配置),然后得到下图的东西，表示我们的配置没有问题

然后加入前端去测试上传功能，首先修改ueditor.config.js中的serverUrl参数，指向自己服务器接口

serverUrl: "http://localhost:8080/config"

  通过后端去跳转到index.html页面，这就是官方的示例代码，后面可以根据自己的需求去更改

  我测试了图片视频上传，现在默认是上传到项目的target目录下的，

2020年6月3日更新：
  使用上面的方法，在本地运行没有问题，能正常上传到本地项目的目录下，但是我发现在上传到服务器部署后，就读取不到配置文件了，所以我更改了这个方法，使用IO流来读取配置文件

ClassPathResource resource = new ClassPathResource("config.json");
StringBuffer buffer = new StringBuffer();
try {
	InputStreamReader reader = new InputStreamReader(resource.getInputStream(), "UTF-8");
	BufferedReader bf = new BufferedReader(reader);
	String str = null;
	while ((str = bf.readLine()) != null) {
	buffer.append(str);
	}
	path = buffer.toString().trim();
} catch (Exception e) {
	e.printStackTrace();
}

  然后对上传图片和视频重新配置，因为按照上面的配置，默认是放在项目的路径下的，我需要将上传的文件放在其他的地方，需要注意返回数据为json字符串格式就可以了

//可以改成调用自己的保存方法，然后返回json格式的字符串，示例：
String testPath = "/image/20200603/1591154731689075892.jpg";//引用我本地的图片，实际在使用时应该为上传的方法，然后返回路径
//这是返回的数据，需要将url字段的值改为testPath
long size = upfile.getSize();
String originalFilename = upfile.getOriginalFilename();
String type = upfile.getOriginalFilename().substring(upfile.getOriginalFilename().lastIndexOf("."));
String title = testPath.substring(testPath.lastIndexOf("/") + 1);
path = "{\"state\": \"SUCCESS\"," +
	"\"original\": \"" + originalFilename + "\"," +
	"\"size\": \"" + size + "\"," +
	"\"title\": \"" + title + "\"," +
	"\"type\": \"" + type + "\"," +
	"\"url\": \"" + testPath + "\"}";

  注意，如果想要在服务器部署后正常使用，需要更改下面几个配置

# 更改ueditor.config.js 的serverUrl属性，将服务器请求接口路径指向自己的服务器(需要加上端口号和接口)
# 示例：
# 192.168.0.109 是我的服务器接口
# 8080 是服务的开放端口
# /config 是配置接口，读取ueditor和上传都是指向的这个接口
serverUrl: "http://192.168.0.109:8080/config"

# 更改config.json的***UrlPrefix属性，给返回的路径增加前缀
# 示例：
# imageUrlPrefix是图片路径前缀，相应的还有videoUrlPrefix视频路径前缀等
# 192.168.0.109 是我的服务器接口
# 8080 是服务的开放端口
"imageUrlPrefix": "http://192.168.0.109:8080"

# 至于其他的例如上传大小限制、文件名等参数，根据自己需要去更改，可以使用默认值

  最后，附上我的源码地址和官方地址
官方文档：http://fex.baidu.com/ueditor/
官方源码下载地址：http://ueditor.baidu.com/website/download.html
ueditor编辑器git地址：https://github.com/fex-team/ueditor
我的演示代码git地址：https://github.com/peach-tec/peachsys