|
开发工具使用 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
10，下篇介绍UEditor远程上传图片到阿里云OSS服务: https://blog.csdn.net/a1053765496/article/details/106035912 | 
转播
