springboot+layui 整合百度富文本編輯器ueditor入門使用教程（踩過的坑） 寫在前面： 富文本編輯器，Multi-function Text Editor, 簡稱 MTE, 是一種可內嵌於瀏覽器，所見即所得的文本編輯器。 UEditor 是由百度「FEX前端研發團隊」開發的 ...
springboot+layui 整合百度富文本編輯器ueditor入門使用教程（踩過的坑）
寫在前面：
富文本編輯器，Multi-function Text Editor, 簡稱 MTE, 是一種可內嵌於瀏覽器，所見即所得的文本編輯器。
UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文本web編輯器，具有輕量，可定製，註重用戶體驗等特點，開源基於 MIT協議，允許自由使用和修改代碼。
效果如圖：
01 首先去官網下載ueditor包
官方網址：http://fex.baidu.com/ueditor/#start-start（下載jsp版本就可以）
02 解壓
你會看到這樣的界面：
dialogs：彈出對話框對應的資源和JS文件
lang：編輯器國際化顯示的文件
themes：樣式圖片和樣式文件
php/jsp/.net：涉及到伺服器端操作的後臺文件，根據你選擇的不同後臺版本，這裡也會不同，這裡我們選擇jsp
third-party：第三方插件(包括代碼高亮，源碼編輯等組件）
index.html:源碼文件，用於演示完整的界面
ueditor.all.js：開發版代碼合併的結果,目錄下所有文件的打包文件
ueditor.all.min.js：ueditor.all.js文件的壓縮版，建議在正式部署時採用
ueditor.config.js：編輯器的配置文件，建議和編輯器實例化頁面置於同一目錄
ueditor.parse.js：編輯的內容顯示頁面引用，會自動載入表格、列表、代碼高亮等樣式
ueditor.all.min.js：ueditor.parse.js文件的壓縮版，建議在內容展示頁正式部署時採用
03 寫個小demo測試一下（layui）
第一步、把解壓後的文件夾整個放到springboot項目中的static目錄下
第二步、放入示例代碼
testLayui_Ueditor.html
<!DOCTYPE html>
<html>
<head>
<title>layui ueditor</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>
<style>
.box {
width: 60%;
margin: 60px auto;
}
</style>
</head>
<body>
<form class="box" action="">
<div class="layui-form-item">
<label class="layui-form-label">標題</label>
<div class="layui-input-block">
<input type="text" name="title" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">內容</label>
<div class="layui-input-block">
<textarea id="container" name="content"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="../../../../../static/UEditor/ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="../../../../../static/UEditor/ueditor.all.js"></script>
<script type="text/javascript" src="../../../../../static/UEditor/lang/zh-cn/zh-cn.js"></script>
<script>
layui.use('form', function(){
var form = layui.form;
// 實例化編輯器
var ue = UE.getEditor('container');
// var content = ue.getContent();
// console.log(content)
//監聽提交
form.on('submit(formDemo)', function(data){
console.log(data.field)
return false;
});
});
</script>
</body>
</html>
幾個註意的點：
註意引入正確的layui.css和layui.js
引入ueditor需要的js文件，註意引入順序必須為 .config 在前，之後 .all，其他的js文件可以引也可以不引，不引入也會自動調用到，主要是config和all，要按先後順序引入！
實例化編輯器：
var ue = UE.getEditor('container'); //此處放的是id
小結
這個文件直接使用瀏覽器打開就是可以看到如下圖的效果的。
但是註意，這裡引入js文件的路徑為完整的路徑
04 整合到springboot項目中
基本步驟和上述靜態整合類似，只不過上面的只需要打開靜態html頁面就可以看到效果了，而下麵我們要做的是把ueditor整合到整個項目里，也就是說要在項目運行之後，載入頁面。
第一步 還是把整個解壓縮的文件放到static目錄下
第二步 整合html頁
- 首先引入js文件
這裡有個坑需要註意！
因為Springboot預設的靜態資源路徑為static，我們不需要再添加/static/首碼，所以需要使用正確的方式來引用，否則就會導致404的問題。
也就是說如果我們的路徑中多寫了static，使用相對路徑來獲取js文件，可能會找不到。
例如：../static/UEditor/ueditor.all.js
- 推薦使用thymeleaf方式（從static的下一個目錄開始寫相對路徑！）
<html xmlns:th="http://www.thymeleaf.org" >
<script type="text/javascript" th:src="@{/UEditor/ueditor.config.js}"></script>
<script type="text/javascript" th:src="@{/UEditor/ueditor.all.js}"></script>
-
然後把ueditor放在你需要放的地方（一般是textarea）
例如：
<div class="layui-input-block">
<textarea id='container' name='text' ></textarea>
</div>
- 實例化
<script>
if(document.getElementById('container')!=null){
var ue = UE.getEditor('container');
}
ue.ready(function() {
ue.setHeight(400);
var html = ue.getContent();
console.log("正文部分："+html)
})
</script>
最關鍵的一步
！！！！！！
註意看
如果按上面的步驟跑了一遍，會發現還是會失敗，因為靜態載入和運行項目之後的載入，ueditor的運行狀態是不一樣的，下麵我介紹一下ueditor大概是怎麼跑起來的。
首先 當我們靜態載入這個插件的時候，會發現路徑大概是這個樣子的：也就是我們可以看到localhost開始一直後面跟的是項目的完整路徑！
那麼這個插件我們只引入了兩個js文件，那其他的文件是怎麼運行的呢？
我們可以打開其中的 config.js 文件一探究竟！
所以我們不難發現，這個插件大概是這麼運行的：
- 載入兩個引入的js文件，通過js文件獲取其他文件的訪問路徑，例如jsp文件夾、css文件等等。
- 通過路徑訪問載入其他文件，完成整個插件的部署配置！
下麵我們打開jsp文件夾看看：
雖然我沒太看懂這些是啥，但是我大概可以猜到，這個文件可能和我們上面分析的調用其他資源有關係
下麵我們來驗證一下這個猜想，我們還是用靜態的方式先看一下：
F12打開調試可以看到
所以我們大致可以確定，其他文件需要通過這個jsp文件完成調度。
好了，講完了上面的過程，下麵我們分析一下，靜態的和動態的有什麼區別，也就是項目跑沒跑到底為什麼會影響ueditor的載入呢？
其實道理很簡單，問題就出在訪問的路徑上！
靜態的方式，訪問路徑是固定的本地路徑，所以不存在配置問題，但是當你項目跑起來了，比如springboot項目是存在項目的路徑的，而這個項目的路徑，如果你不去告訴ueditor，它是不清楚在哪裡的，所以也就沒辦法去用jsp調用其他資源了！
下麵兩張圖告訴你區別：可以看到同樣的 jsp？，但是前面是不一樣的，這也就導致瞭如果不去配置前面的路徑，ueditor的其他資源必然是找不到的！
- 靜態頁面
- 項目跑起來之後的訪問路徑
http://169.254.208.81:8008/UEditor/jsp/controller.jsp?action=config&&noCache=1654875217963
ueditor為我們提供了一種很方便的方式來配置這個路徑，只需要在你引用了插件的html文件的最開頭加上這樣一句話：
<script type="text/javascript">
window.UEDITOR_HOME_URL = "http://169.254.208.81:8008/UEditor/";
</script>
之後再次運行項目可以看到ueditor正常顯示！好了，分享完畢，希望對大家有幫助！
好看請贊，養成習慣！
本文來自博客園，作者：靠譜楊，轉載請註明原文鏈接：https://www.cnblogs.com/rainbow-1/p/16365016.html
