SpringBoot2.X整合UEditor百度富文本编辑器-Java版本

最新推荐文章于 2024-04-10 01:35:37 发布

又逢乱世

最新推荐文章于 2024-04-10 01:35:37 发布

阅读量1.6k

点赞数 2

文章标签：编辑器

本文链接：https://blog.csdn.net/a1053765496/article/details/105965560

版权

开发工具使用 idea，后台代码项目使用java，springboot2.2.1，maven管理

1，下载 UEditor解压包，下载地址：GitHub - fex-team/ueditor: rich text 富文本编辑器

2，解压下载后的压缩包，将解压后的文件整个都拖进springboot项目中（我这里放到的位置是resource/static/ueditor目录下）

3，开始配置，在需要用到富文本编辑器的html页面写入这样的代码

<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<script th:src="@{ueditor/ueditor.config.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{ueditor/ueditor.all.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{ueditor/lang/zh-cn/zh-cn.js}" type="text/javascript" charset="utf-8"></script>
<div>
    <script id="editor" type="text/plain" style="width:100%;height:550px;"></script>
</div>
<script type="text/javascript">
    var ue = UE.getEditor('editor');
</script>

4，找到/resources/static/ueditor/ueditor.config.js 文件, 修改URL为编辑器资源在项目中的访问路径，修改serverUrl变量为"/config"，注意点这里的serverUrl的路径一定要是"/config"，不能加前缀，例如"/ueditor/config"是错误的，这个路径对应着后台代码的接口路径，第5步会讲到。

当配置正确URL路径后，通过浏览器访问页面编辑器就可以正常显示了，如下图

5，编写"/config"路径后台对应的接口

5.1，在项目pom依赖中添加ueditor的jar包，注意点这里的包不能使用idea的project structure外部导入/resources/static/ueditor/jsp/lib路径下jar包的方式，不然在上传图片的时候报"未找到上传数据"错误，必须使用pom依赖的方式，只引入ueditor这一个依赖即可。

<dependency>
    <groupId>com.gitee.qdbp.thirdparty</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.4.3.3</version>
</dependency>

5.2，编写后台接口，在项目中创建一个controller（我这里的叫UEditorController），定义"/config"接口访问路径。

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 javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * 百度富文本编辑器
 *
 * @author lixx
 * @version 1.0
 * @date 2020-05-06 14:18
 */
@RestController
public class UEditorController {

	@RequestMapping(value="/config")
	public void config(HttpServletRequest request, HttpServletResponse response) {
		response.setContentType("application/json");
		// rootPath路径: /D:/develop/web-service/target/classes/static/ueditor/jsp, 上传的图片会在这里路径下面
		String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static/ueditor/jsp";
		try {
			response.setCharacterEncoding("UTF-8");
			PrintWriter writer = response.getWriter();
			writer.write(new ActionEnter( request, rootPath ).exec());
			writer.flush();
			writer.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

6，修改/resources/static/ueditor/jsp/config.json文件中的 imageUrlPrefix 图片访问前缀，对应着"/config"接口中的rootPath路径，本文中后台上传的路径为/target/classes/static/ueditor/jsp，那么图片的访问前缀就是"/ueditor/jsp"，大家的项目访问可能有的需要在前面加static或者其他有的不需要，请根据自身项目路径访问规则进行调整。

这个路径也可以改成自己指定的路径，需要修改config.json中的 imageUrlPrefix，imagePathFormat和UEditorController中的rootPath变量，这三个路径保持一致即可。

7，以上配置完成，让我们看看效果

上传成功，图片保存位置为 target/classes/static/ueditor/jsp

8，问题：本地通过idea工具启动没有问题，在linux上使用jar包的方式启动后，UEditorController 的 rootPath 找不到jar包里面的config.json配置文件(ps:弄了半天我也没找到要怎么读取到.网上说的那些方法试过了很多都没有用)。

解决办法：使用maven打包的时候将resources/static/ueditor/jsp/config.json打包到jar包外面。

如何将配置文件打包在jar包外部请参考：Springboot将配置文件打包在jar包外部_又逢乱世-CSDN博客

在pom文件中加入静态文件的路径即可。

<excludes>
    <exclude>**/static/ueditor/jsp/*.json</exclude>
</excludes>

9，代码示例(上面都有讲到并且贴出了，实在不明白的同学可以下载代码参考)：SpringBoot整合UEditor富文本编辑器_springboot整合富文本编辑器,thymeleaf富文本编辑器-Java文档类资源-CSDN下载

10，下篇介绍UEditor远程上传图片到阿里云OSS服务: SpringBoot 2.2.X整合UEditor上传图片到OSS服务远程上传图片-Java版本_又逢乱世-CSDN博客

又逢乱世

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
2
评论
SpringBoot2.X整合UEditor百度富文本编辑器-Java版本

开发工具使用的 idea，后台代码项目使用了的是java，使用springboot2.2.1，maven管理1，下载 UEditor解压包2，解压下载后的压缩包，将解压后的文件整个都拖进springboot项目中（我这里放到的位置是resource/static/ueditor目录下）3，开始配置，在需要用到富文本编辑器的html页面写入这样的代码<div&...
复制链接

扫一扫