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

标签: 编辑器

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

1,下载 UEditor解压包,下载地址:http://ueditor.baidu.com/website/download.html

 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包外部请参考:https://blog.csdn.net/a1053765496/article/details/105971037

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

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

 9,代码示例(上面都有讲到并且贴出了,实在不明白的同学可以下载代码参考):https://download.csdn.net/download/a1053765496/12396789

版权声明:本文为a1053765496原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/a1053765496/article/details/105965560