前言:之前做了很多富文本编辑器的工作,不过都是以前了,最近项目突然要加富文本编辑器。心想那就加嘛,没想到springboot整合ueditor这么多坑,一个一个淌过来足足用了整整一天时间。趁着记忆力还算充足赶紧记录一下。
一、ueditor引入SpringBoot
首先请准备进入这个浑水的请务必注意,百度富文本编辑器已经4年没有更新过了。如果不是项目必须要用,你完全可以选择市面上仍在维护的编辑器。
那么开始正常的引入流程:
(1)官网下载适合的版本,这里我选择的是JSP版本
下载后解压缩,是一个如此结构的目录
我们将这部分代码直接复制到项目中的静态文件目录下,我这里的目录是这样的
导入maven依赖及相关的文件引入
ueditor的jar包存放在jsp/lib目录下,自己maven进去即可
相关的maven依赖:(这里ueditor和json包我没在中央仓库下载,而是手动cmd mvn引入的,所以实际依赖可能会和我的不一样,请自行选择,效果是一样的)
<!-- 引入富文本编辑器依赖 -->
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>com.baidu</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.2</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>1.0</version>
</dependency>
在相关页面用themleaf引入对应的JS
<script th:src="@{/ueditor/ueditor.config.js}"></script>
<script th:src="@{/ueditor/ueditor.all.min.js}"></script>
<script th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
这里请务必注意引入顺序,config.js必须在all.min.js上面,让ueditor先加载相关配置项,不然会JS报错,富文本编辑器初始化失败。
(3)在页面初始化富文本编辑器
html:
JS:
//初始化富文本编辑器
var ue = UE.getEditor("editor");
至此,项目引入富文本编辑器第一步就完成了。
打开对应的页面,出现如图
二、ueditor的图片、附件、视频等相关的配置与结合fastDFS
完成了上面步骤后,富文本编辑器自己已经可以运转了,但附件上传功能还是坏的。
会提示后端配置不正确,上传插件不能使用。
这里ueditor会读取ueditor.config.js中的配置
而JSP中只是个跳转,最终找到的是config.json,这里面是全部富文本编辑器上传所需要的配置项
但是这里有两个问题,
一个是config.json在这个目录下是读取不到的,为此我们需要把它移动到statics目录下,
第二个是config.json读取加载完毕后会走ueditor内置的BinaryUploader文件上传。
这里由于springboot默认配置原因,springboot与BinaryUploader内置的方法冲突,所以用它自带的上传方法是拿不到文件流的,会不停的报未找到上传数据的错误。
三、ueditor重写,并整合进fastDFS
于是为了拿到上传数据,以及整合fastDFS,我们需要重写这部分代码。
首先干掉controller.jsp和config.json,这里我们完全不需要ueditor内置的上传方法了,
新建一个ueditor的controller
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* @author deer_boom
* @version 1.0
* @date 2020年7月27日
*/
@RequestMapping("ueditor")
@RestController
public class UEditorController {
@RequestMapping("/Config")
public String uploadConfig() {
String s = "/* 前后端通信相关的配置,注释只允许使用多行方式 */\n" +
"{\n" +
" /* 上传图片配置项 */\