Spring Boot整合Ueditor的三种方式

最近前端页面需要使用百度的Ueditor富文本编辑器，本来以为只需要前端适配就可以了，没想到Ueditor需要使用一个服务器统一请求接口，各种百度，历时一天终于弄懂了是怎么一回事，下面是我整了的三种整合的方式，从使用Ueditor的后端代码，到引入Ueditor依赖，到最后完全接管Ueditor后端，都是验证可行的。

一、代码源码下载

ueditor 官网：http://ueditor.baidu.com

ueditor API 文档：http://ueditor.baidu.com/doc

ueditor github 地址：http://github.com/fex-team/ueditor

下载地址：https://github.com/fex-team/ueditor/releases

方式一：根据ueditor后端源码构建项目

1、复制后端包

复制jsp中的后端代码，需要修改import的包路径为当前项目的包路径

2、复制前端包

复制uft8-jsp中前端代码到resources的static目录

3、复制配置文件

其实这个配置文件放到哪里都可以，只要在代码中配置好路径，使得能够找到配置文件即可，这里为了方便获取配置文件，放到resources目录下最合适

4、配置文件上传路径并设置为静态资源路径

5、编写Controller接口

package com.wishboy.myueditor.controller;

import com.wishboy.myueditor.ueditor.ActionEnter;

import org.springframework.beans.factory.annotation.Value;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

@Controller

@RequestMapping("/ueditor")

public class UEditorController {

//注入application.properties里面的配置web.upload-path

@Value("${web.upload-path}")

private String uploadPath;

@RequestMapping(value = "/config")

public void config(HttpServletRequest request, HttpServletResponse response) {

response.setContentType("application/json");

String rootPath = uploadPath;

try {

String exec = new ActionEnter(request, rootPath).exec();

PrintWriter writer = response.getWriter();

writer.write(exec);

writer.flush();

writer.close();

} catch (IOException e) {

e.printStackTrace();

}

注入文件上传路径
/ueditor/config接口为ueditor访问后端的统一接口地址，根据action参数判拉取配置文件和文件上传

6、修改ConfigManager文件

这里主要是修改configFileName，需要设置为config.json文件存放的resources下的目录

public final class ConfigManager {

private final String rootPath;

private final String originalPath;

private final String contextPath;

private static final String configFileName = "static/config.json";

7、前端js配置修改

修改ueditor.config.js中的serverUrl地址，后端提供
http://localhost:80/ueditor/config这个就是前端ueditor页面请求后端的统一接口

window.UEDITOR_CONFIG = {

//为编辑器实例添加一个路径，这个不能被注释

UEDITOR_HOME_URL: URL

// 服务器统一请求接口路径

, serverUrl: "http://localhost:80/ueditor/config"

8、关于统一接口地址的说明

获取配置文件

前端在ueditor.config.js文件中配置serverUrl地址，这个地址用于获取配置文件config.json

完整接口地址为：http://localhost:80/ueditor/config_upload?action=config
该接口参数由ueditor自动配置成功

上传文件

文件格式包括：图片、视频、文件等
ueditor会根据按钮的设置，自动添加参数到统一接口地址末尾
如图片上传：http://localhost/ueditor/config_upload?action=uploadimage

9、后端依赖

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

</dependency>

<groupId>commons-fileupload</groupId>

<artifactId>commons-fileupload</artifactId>

</dependency>

</dependency>

<groupId>commons-codec</groupId>

<artifactId>commons-codec</artifactId>

</dependency>

</dependencies>

方式二：引入ueditor依赖实现

1、引入ueditor依赖

<groupId>com.gitee.qdbp.thirdparty</groupId>

<artifactId>ueditor</artifactId>

</dependency>

</dependency>

2、复制前端包

复制uft8-jsp中前端代码到resources的static目录

3、复制配置文件

其实这个配置文件放到哪里都可以，只要在代码中配置好路径，使得能够找到配置文件即可，这里为了方便获取配置文件，放到resources目录下最合适

4、编写Controller接口

package com.wishboy.myueditor.springboot.controller;

import com.alibaba.fastjson.JSONObject;

import com.baidu.ueditor.ActionEnter;

import com.baidu.ueditor.upload.StorageManager;

import com.wishboy.myueditor.springboot.service.UeditorService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

@RestController

@RequestMapping("ueditor")

public class UeditorController {

@RequestMapping(value = "/config")

public void config(HttpServletRequest request, HttpServletResponse response) {

response.setContentType("application/json");

// 读取配置文件中配置的上传文件保存地址

String rootPath = this.getClass().getClassLoader().getResource("").getPath();

String configPath = "static/config.json";

try {

// String exec = new ActionEnter(request, rootPath).exec();

String exec = new ActionEnter(new StorageManager(), request, rootPath, configPath).exec();

PrintWriter writer = response.getWriter();

writer.write(exec);

writer.flush();

writer.close();

} catch (IOException e) {

e.printStackTrace();

}

5、前端js配置修改

http://localhost:80/ueditor/config这个就是前端ueditor页面请求后端的统一接口
修改ueditor.config.js中的serverUrl地址，后端提供

window.UEDITOR_CONFIG = {

//为编辑器实例添加一个路径，这个不能被注释

UEDITOR_HOME_URL: URL

// 服务器统一请求接口路径

, serverUrl: "http://localhost:80/ueditor/config"

方式三：后端实现统一请求接口

编写Ueditor工具类

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

package net.trueland.tcloud.crm.common.util;

import com.alibaba.fastjson.JSONObject;

import lombok.extern.slf4j.Slf4j;

import net.trueland.tcloud.crm.service.common.FileService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.core.io.ClassPathResource;

import org.springframework.core.io.Resource;

import org.springframework.stereotype.Component;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.multipart.MultipartHttpServletRequest;

import org.springframework.web.util.WebUtils;

import javax.servlet.http.HttpServletRequest;

import java.io.*;

import java.util.HashMap;

import java.util.Map;

/**

* @author zhujie

* @date 2022/6/23

* @description Ueditor 富文本编辑器工具类，后端完全接管

@Component

@Slf4j

public class UeditorUitls {

//配置文件路径，默认为resources/ueditor-config.json

private final String configPath = "ueditor-config.json";

@Autowired

private FileService fileService;

/**

* 读取Ueditor配置文件，或者上传文件

* @param action 读配置文件：config 图片上传：uploadimage 详见 ActionMap.mapping

* @return

public Object getConfigOrUploadFile(String action, HttpServletRequest request) {

int actionCode = ActionMap.getType(action);

Object result = null;

switch (actionCode) {

case ActionMap.CONFIG:

try {

Resource resource = new ClassPathResource(configPath);

InputStream is = resource.getInputStream();

String configContent = this.readUeditorConfigFile(is);

result = JSONObject.parseObject(configContent);

} catch (IOException e) {

e.printStackTrace();

}

break;

case ActionMap.UPLOAD_IMAGE:

case ActionMap.UPLOAD_SCRAWL:

case ActionMap.UPLOAD_VIDEO:

case ActionMap.UPLOAD_FILE:

MultipartHttpServletRequest multipartRequest =

WebUtils.getNativeRequest(request, MultipartHttpServletRequest.class);

MultipartFile uploadFile = multipartRequest.getFile("upfile");

result = fileService.upload2Server(uploadFile);

break;

case ActionMap.CATCH_IMAGE:

case ActionMap.LIST_IMAGE:

case ActionMap.LIST_FILE:

break;

}

return result;

}

/**

* 读取配置文件信息

* @param is

* @return

* @throws IOException

private String readUeditorConfigFile(InputStream is) throws IOException {

StringBuilder builder = new StringBuilder();

try {

InputStreamReader reader = new InputStreamReader(is, "UTF-8");

BufferedReader bfReader = new BufferedReader(reader);

String tmpContent = null;

while ((tmpContent = bfReader.readLine()) != null) {

builder.append(tmpContent);

}

bfReader.close();

} catch (UnsupportedEncodingException e) {

// 忽略

}

return this.filter(builder.toString());

}

// 过滤输入字符串, 剔除多行注释以及替换掉反斜杠,官方配置文件中有注释

private String filter(String input) {

return input.replaceAll("/\\*[\\s\\S]*?\\*/", "");

}

/**

* 请求action映射类

static class ActionMap {

public static final Map<String, Integer> mapping;

// 获取配置请求

public static final int CONFIG = 0;

public static final int UPLOAD_IMAGE = 1;

public static final int UPLOAD_SCRAWL = 2;

public static final int UPLOAD_VIDEO = 3;

public static final int UPLOAD_FILE = 4;

public static final int CATCH_IMAGE = 5;

public static final int LIST_FILE = 6;

public static final int LIST_IMAGE = 7;

static {

mapping = new HashMap<String, Integer>() {{

put("config", ActionMap.CONFIG);

put("uploadimage", ActionMap.UPLOAD_IMAGE);

put("uploadscrawl", ActionMap.UPLOAD_SCRAWL);

put("uploadvideo", ActionMap.UPLOAD_VIDEO);

put("uploadfile", ActionMap.UPLOAD_FILE);

put("catchimage", ActionMap.CATCH_IMAGE);

put("listfile", ActionMap.LIST_FILE);

put("listimage", ActionMap.LIST_IMAGE);

}};

}

public static int getType(String key) {

return ActionMap.mapping.get(key);

}

UeditorUitls是Ueditor工具类，包含处理请求的统一接口方法getConfigOrUploadFile(String action, HttpServletRequest request)
ActionMap是UeditorUitls的静态内部类，定义了请求action的类型及映射
readUeditorConfigFile(InputStream is)读取配置文件数据
filter(String input)过滤配置文件注释
request用于上传文件时从请求中获取文件流

2、复制前端包

复制uft8-jsp中前端代码到resources的static目录

3、复制配置文件

其实这个配置文件放到哪里都可以，只要在代码中配置好路径，使得能够找到配置文件即可，这里为了方便获取配置文件，放到resources目录下最合适

4、编写Controller接口

@ApiOperation("Ueditor富文本编辑器服务端统一请求接口")

@RequestMapping("/config/upload/file")

public Rsp<Object> configUploadFile(@RequestParam("action") String action, HttpServletRequest request){

Object result = ueditorUitls.getConfigOrUploadFile(action, request);

return Rsp.success(result);

}

5、实现效果

from:https://blog.csdn.net/weixin_56172906/article/details/125447544

November 2024
M	T	W	T	F	S	S
« Oct
				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	28	29	30