UEditor簡介
UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼
官網(wǎng)：https://ueditor.baidu.com/
UEditor分類
UEeditor(官網(wǎng)上的開發(fā)版)
Github地址：https://github.com/fex-team/ueditor
官方文檔地址：http://fex.baidu.com/ueditor/
另一個(gè)是UMeditor(mini版)
Github地址：https://github.com/fex-team/umeditor
UMeditor，簡稱UM，是ueditor的簡版。是為滿足廣大門戶網(wǎng)站對于簡單發(fā)帖框和回復(fù)框的需求，專門定制的在線富文本編輯器。
UEditor/UMeditor主要特點(diǎn)
1.輕量: 主文件的代碼量為139k。
2.加載速度更快: 放棄了使用傳統(tǒng)的iframe模式，采用了div的加載方式，以達(dá)到更快的加載速度和零加載失敗率。
3.可定制: 配置項(xiàng)完善，可定制程度高。
4.可擴(kuò)展: 代碼層次拆分清晰，功能以插件形式掛接，可靈活定制需要的功能。
5.多后臺支持: 支持php、asp、jsp、.net四種后臺部署代碼
6.功能豐富: 支持插入公式、粘貼QQ截屏、拖放上傳圖片、插入地圖、草稿箱功能
與SpringBoot進(jìn)行集成
由于整合的是前端框架，所以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版本的就可以了，下載解壓后你會發(fā)現(xiàn)有html,css,js,圖片等靜態(tài)資源，直接在static靜態(tài)資源目錄下創(chuàng)建個(gè)ueditor目錄，然后把解壓出來的靜態(tài)資源都放進(jìn)去就可以了
這里說下jsp目錄
jsp里面包含了Java集成ueditor會用到的一些Jar包還有一個(gè)JSP頁面，這里用thymeleaf模板代替就不需要JSP了，由于引入了第三方ueditor依賴。所以可以把lib文件夾和jsp頁面都刪掉
重點(diǎn)說明
要重點(diǎn)注意config.json和ueditor.config.js兩個(gè)文件
config.json
圖片訪問路徑前綴imageUrlPrefix、視頻訪問路徑前綴videoUrlPrefix、文件訪問路徑前綴fileUrlPrefix不要賦值，會影響回顯，其余參數(shù)可以按照百度文檔修改
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用于回顯圖片，不設(shè)置的話后顯示不出上傳的圖片
Spring上傳文件默認(rèn)最大1MB，上傳文件大小會先被Spring限制，config.json文件大小限制要小于Spring的設(shè)置，可以將Spring的限制設(shè)大點(diǎn)
編寫controller和thymeleaf頁面
@GetMapping("/")
public String index() {
return "ue";
}
主要用來頁面跳轉(zhuǎn)，別忘了在類上加個(gè)@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編輯器實(shí)例
測試啟動
訪問http://localhost:8080/
成功看到UEditor編輯器界面說明集成成功
文件存儲路徑
每次上傳文件，圖片，或者視頻，都會在項(xiàng)目對應(yīng)的磁盤下生成ueditor文件夾
存儲格式路徑其實(shí)在config.json中都可以設(shè)置的，在config.json中搜索PathFormat關(guān)鍵字就可以找到各種文件的路徑設(shè)置
Window
比如說你的項(xiàng)目在D盤，有上傳文件的話就會在D盤自動生成ueditor文件夾用于本地存儲
Linux服務(wù)器
ueditor文件夾就會在根路徑生成
|
