UEditor简介
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码
官网：https://ueditor.baidu.com/
UEditor分类
UEeditor(官网上的开发版)
Github地址：https://github.com/fex-team/ueditor
官方文档地址：http://fex.baidu.com/ueditor/
另一个是UMeditor(mini版)
Github地址：https://github.com/fex-team/umeditor
UMeditor，简称UM，是ueditor的简版。是为满足广大门户网站对于简单发帖框和回复框的需求，专门定制的在线富文本编辑器。
UEditor/UMeditor主要特点
1.轻量: 主文件的代码量为139k。
2.加载速度更快: 放弃了使用传统的iframe模式，采用了div的加载方式，以达到更快的加载速度和零加载失败率。
3.可定制: 配置项完善，可定制程度高。
4.可扩展: 代码层次拆分清晰，功能以插件形式挂接，可灵活定制需要的功能。
5.多后台支持: 支持php、asp、jsp、.net四种后台部署代码
6.功能丰富: 支持插入公式、粘贴QQ截屏、拖放上传图片、插入地图、草稿箱功能
与SpringBoot进行集成
由于整合的是前端框架，所以ueditor官方并没有jar包传到maven仓库
引入ueditor包的源码地址：
https://github.com/weiangongsi/ueditor-spring-boot-starter
<dependency>
<groupId>com.dcssn</groupId>
<artifactId>ueditor-spring-boot-starter</artifactId>
<version>0.0.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
下载UEditor源码
UEditor/UMeditor源码下载地址https://ueditor.baidu.com/website/download.html
Java下载JSP版本的就可以了，下载解压后你会发现有html,css,js,图片等静态资源，直接在static静态资源目录下创建个ueditor目录，然后把解压出来的静态资源都放进去就可以了
这里说下jsp目录
jsp里面包含了Java集成ueditor会用到的一些Jar包还有一个JSP页面，这里用thymeleaf模板代替就不需要JSP了，由于引入了第三方ueditor依赖。所以可以把lib文件夹和jsp页面都删掉
重点说明
要重点注意config.json和ueditor.config.js两个文件
config.json
图片访问路径前缀imageUrlPrefix、视频访问路径前缀videoUrlPrefix、文件访问路径前缀fileUrlPrefix不要赋值，会影响回显，其余参数可以按照百度文档修改
ueditor.config.js
将serverUrl 改为yml配置文件中ue.server-url 的值
yml配置文件如下
spring:
servlet:
multipart:
max-file-size: 100MB
ue:
config-file: static/ueditor/jsp/config.json
server-url: /ueditor.do
url-prefix: /file
ue.url-prefix= /file用于回显图片，不设置的话后显示不出上传的图片
Spring上传文件默认最大1MB，上传文件大小会先被Spring限制，config.json文件大小限制要小于Spring的设置，可以将Spring的限制设大点
编写controller和thymeleaf页面
@GetMapping("/")
public String index() {
return "ue";
}
主要用来页面跳转，别忘了在类上加个@Controller注解
<!DOCTYPE html>
<html lang="UTF-8" xmlns:th="http://www./schema/jdbc">
<head>
<meta charset="UTF-8"/>
<title>ueditor</title>
<style>
#editor {
width: 1024px;
height: 500px;
}
</style>
</head>
<body>
<div id="editor" type="text/plain"></div>
<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>
<script>
UE.getEditor('editor');
</script>
</body>
</html>
UE.getEditor('editor')在ueditor.all.js中，用于得到UEditor编辑器实例
测试启动
访问http://localhost:8080/
成功看到UEditor编辑器界面说明集成成功
文件存储路径
每次上传文件，图片，或者视频，都会在项目对应的磁盘下生成ueditor文件夹
存储格式路径其实在config.json中都可以设置的，在config.json中搜索PathFormat关键字就可以找到各种文件的路径设置
Window
比如说你的项目在D盘，有上传文件的话就会在D盘自动生成ueditor文件夹用于本地存储
Linux服务器
ueditor文件夹就会在根路径生成
|
