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