Spring Boot + thymeleaf 整合UEditor百度编辑器的各种问题解决_springboot 后台配置项返回格式出错,上传功能将不能正常使用!

作者：很楠不爱3 | 2024-06-18 05:56:57

踩

springboot 后台配置项返回格式出错,上传功能将不能正常使用!

前言

很多小伙伴以前使用Spring + SpringMVC+Jsp 做的项目加入UEditor ，下载官网JSP版本可以快速实现UEditor 的使用；但是自项目转成Spring Boot 开发后，却发现原来的UEditor 使用不了了，今天我们就把坑一个一个引出，然后一个一个填上；

下载/配置

首先我们去官方下载UEditor JSP版本，解压后放到项目resources/static目录；
因为Spring Boot对静态资源映射提供了默认配置

classpath:/static 
classpath:/public 
classpath:/resources 
classpath:/META-INF/resources
1
2
3
4

博主放在了 resources/static/js/plugins/ueditor ,大家可以根据自己需求放置；博主以下的代码样例均已 resources/static/js/plugins/ueditor 目录进行；

在这里插入图片描述
引入完成，在resources/templates（这是thymeleaf默认映射的模板路径这里就不多介绍了）下创建 ueditor.html；
通过thymeleaf标签引入资源，代码如下：

<body class="gray-bg">

<script id="container" name="content" type="text/plain"></script>

<!-- 百度编辑器配置文件 -->
<script type="text/javascript" th:src="@{/js/plugins/ueditor/ueditor.config.js}"></script>
<!-- 百度编辑器编辑器源码文件 -->
<script type="text/javascript" th:src="@{/js/plugins/ueditor/ueditor.all.js}"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

然后我们创建一个controller 映射ueditor.html；请求这个controller,看页面效果出现百度编辑器证明我们配置百度编辑器第一步已经成功！
在这里插入图片描述

后台配置项返回格式出错，上传功能将不能正常使用

此时如果大家去使用编辑器上传会发现无法上传，采用浏览器DEBUG会发现，出现后台配置项返回格式出错，上传功能将不能正常使用的错误；
在这里插入图片描述
要解决这个问题那么我们就需要先了解一下，UEditor 读取配置的机制；看一下我们页面引入的配置JS ueditor.config.js

进入JSP目录，目录中有两个文件

查看controller.jsp 中 new ActionEnter(request, rootPath).exec() 方法看其到底如何读取配置；
在这里插入图片描述
其实controller.jsp 是作为核心请求的类，它根据传递的action值来判断是读取配置、还是进行图片上传、文件上传等；
实际上源码中看出controller.jsp实际读取的就是和它同目录下的config.json
既然是同目录下，我们只需要指定我们的controller 和 config.json 访问路径即可，不需要和网上说了将config.json 移到哪里哪里；

开始解决：我们使用的是thymeleaf 很显然我们项目是不会再去添加JSP支持的，
第一步：我们先把引入UEditor所需JAR包；配置POM.XML 加入

        <!-- 百度编辑器 -->
        <dependency>
            <groupId>cn.songxinqiang</groupId>
            <artifactId>com.baidu.ueditor</artifactId>
            <version>1.1.2-offical</version>
        </dependency>
1
2
3
4
5
6

第二步：我们需要把JSP中的代码使用controller来书写，刚才页提到了我们需要保证该controller 和 config.json 访问路径一致；博主完整的contriller代码如下：
注意：@RequestMapping("/js/plugins/ueditor/jsp") 和ueditor存在在resources/static 路径相同即可 其中ReadApplicationYmlUtil是博主读取自定义上传配置类，大家可以自己实际需求来决定；因为SpringBoot 打包JAR运行是无法将图片上传至项目路径下的

@Controller
@RequestMapping("/js/plugins/ueditor/jsp")
public class UeditorController {
    @Resource
    private ReadApplicationYmlUtil readApplicationYmlUtil;
    /**
     * 设置测试页
     *
     * @return
     */
    @RequestMapping("/index")
    public String index() {
        return "system/ueditor";
    }

    /**
     * 读取配置的请求
     * @param request
     * @param response
     */
    @RequestMapping("/controller")
    @ResponseBody
    public void getConfigInfo(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        //获取classPath路径
        String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static";
        //将存盘目录设置到request 作用域 在百度上传的类中读取
        request.setAttribute("uploadPath",readApplicationYmlUtil.getUploadPath());
        
        System.out.println("rootPath:" + rootPath);
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            System.out.println("exec:" + exec);
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}
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
31
32
33
34
35
36
37
38
39
40
41
42
43

创建完毕，我们修改页面端 ueditor.config.js
在这里插入图片描述
运行测试页面：http://localhost:8080/js/plugins/ueditor/jsp/index OK问题解决，不会再出现后台配置项返回格式出错的提示了；实际上这个问题就是我们需要想办法解决读取config,json 即可

上传图片未找到上传数据

这个问题，实际上也是博主经过断点一步一步才发现的问题，如下图：
在这里插入图片描述
问题找到，我们只需要改写 BinaryUploader 类，重新编译后进行再进行打包即可；修改源码如下：

public class BinaryUploader {

	public static final State save(HttpServletRequest request,
								   Map<String, Object> conf) {

		if (!ServletFileUpload.isMultipartContent(request)) {
			return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
		}


		try {
			//将request 转化成 MultipartHttpServletRequest
			MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
			MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
			if(multipartFile==null){
				return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
			}

			String savePath = (String) conf.get("savePath");
			String originFileName = multipartFile.getOriginalFilename();
			String suffix = FileType.getSuffixByFilename(originFileName);

			originFileName = originFileName.substring(0,
					originFileName.length() - suffix.length());
			savePath = savePath + suffix;

			long maxSize = ((Long) conf.get("maxSize")).longValue();

			if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
				return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
			}

			savePath = PathFormat.parse(savePath, originFileName);

			//此处为springboot中自定义 资源上传的硬盘路径，可以根据自己需求再controller中读取自定义配置设置
			String uploadPath = "";
			if(request.getAttribute("uploadPath")!=null){
				uploadPath = (String)request.getAttribute("uploadPath");
			}

			String physicalPath = uploadPath + savePath;

			InputStream is = multipartFile.getInputStream();
			State storageState = StorageManager.saveFileByInputStream(is,
					physicalPath, maxSize);
			is.close();

			if (storageState.isSuccess()) {
				storageState.putInfo("url",  PathFormat.format(savePath));
				storageState.putInfo("type", suffix);
				storageState.putInfo("original", originFileName + suffix);
			}

			return storageState;
		} catch (IOException e) {
		}
		return new BaseState(false, AppInfo.IO_ERROR);
	}

	private static boolean validType(String type, String[] allowTypes) {
		List<String> list = Arrays.asList(allowTypes);

		return list.contains(type);
	}
}
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

重新编译后打包，我们再来测试一下；
在这里插入图片描述
至此Spring Boot + thymeleaf 整合UEditor 完成，大家可以参看源码修改部分代码，自己进行对应调整；

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/733955

Spring Boot + thymeleaf 整合UEditor百度编辑器的各种问题解决_springboot 后台配置项返回格式出错,上传功能将不能正常使用!

前言

下载/配置

后台配置项返回格式出错，上传功能将不能正常使用

上传图片 未找到上传数据

上传图片未找到上传数据