springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

靠譜楊 發表於 2022-06-10
Spring

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

寫在前面:

​ 富文字編輯器,Multi-function Text Editor, 簡稱 MTE, 是一種可內嵌於瀏覽器,所見即所得的文字編輯器

​ UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文字web編輯器,具有輕量,可定製,注重使用者體驗等特點,開源基於 MIT協議,允許自由使用和修改程式碼。

效果如圖:

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

01 首先去官網下載ueditor包

官方網址:http://fex.baidu.com/ueditor/#start-start(下載jsp版本就可以)

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

02 解壓

你會看到這樣的介面:

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

​ 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目錄下

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

第二步、放入示例程式碼

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>

幾個注意的點:

  1. 注意引入正確的layui.css和layui.js

  2. 引入ueditor需要的js檔案,注意引入順序必須為 .config 在前,之後 .all,其他的js檔案可以引也可以不引,不引入也會自動呼叫到,主要是config和all,要按先後順序引入!

  3. 例項化編輯器:

    var ue = UE.getEditor('container'); //此處放的是id

小結

這個檔案直接使用瀏覽器開啟就是可以看到如下圖的效果的。

但是注意,這裡引入js檔案的路徑為完整的路徑

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

04 整合到springboot專案中

基本步驟和上述靜態整合類似,只不過上面的只需要開啟靜態html頁面就可以看到效果了,而下面我們要做的是把ueditor整合到整個專案裡,也就是說要在專案執行之後,載入頁面。

第一步 還是把整個解壓縮的檔案放到static目錄下

第二步 整合html頁

  1. 首先引入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>
  1. 然後把ueditor放在你需要放的地方(一般是textarea

    例如:

<div class="layui-input-block">
    <textarea id='container' name='text' ></textarea>
</div>
  1. 例項化
<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開始一直後面跟的是專案的完整路徑!

![image-20220610232118981](springboot+layui 整合百度富文字編輯器ueditor使用教程(踩過的坑)/image-20220610232118981.png)

那麼這個外掛我們只引入了兩個js檔案,那其他的檔案是怎麼執行的呢?

我們可以開啟其中的 config.js 檔案一探究竟!

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

所以我們不難發現,這個外掛大概是這麼執行的:

  1. 載入兩個引入的js檔案,通過js檔案獲取其他檔案的訪問路徑,例如jsp資料夾、css檔案等等。
  2. 通過路徑訪問載入其他檔案,完成整個外掛的部署配置!

下面我們開啟jsp資料夾看看:

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

雖然我沒太看懂這些是啥,但是我大概可以猜到,這個檔案可能和我們上面分析的呼叫其他資源有關係

下面我們來驗證一下這個猜想,我們還是用靜態的方式先看一下:

F12開啟除錯可以看到

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

所以我們大致可以確定,其他檔案需要通過這個jsp檔案完成排程。


好了,講完了上面的過程,下面我們分析一下,靜態的和動態的有什麼區別,也就是專案跑沒跑到底為什麼會影響ueditor的載入呢?

其實道理很簡單,問題就出在訪問的路徑上!

靜態的方式,訪問路徑是固定的本地路徑,所以不存在配置問題,但是當你專案跑起來了,比如springboot專案是存在專案的路徑的,而這個專案的路徑,如果你不去告訴ueditor,它是不清楚在哪裡的,所以也就沒辦法去用jsp呼叫其他資源了!

下面兩張圖告訴你區別:可以看到同樣的 jsp?,但是前面是不一樣的,這也就導致瞭如果不去配置前面的路徑,ueditor的其他資源必然是找不到的!

  1. 靜態頁面

http://localhost:63342/science/static/UEditor/jsp/controller.jsp?action=config&&noCache=1654874890533

  1. 專案跑起來之後的訪問路徑

http://169.254.208.81:8008/UEditor/jsp/controller.jsp?action=config&&noCache=1654875217963

springboot+layui 整合百度富文字編輯器ueditor入門使用教程(踩過的坑)

ueditor為我們提供了一種很方便的方式來配置這個路徑,只需要在你引用了外掛的html檔案的最開頭加上這樣一句話:

<script type="text/javascript">
    window.UEDITOR_HOME_URL = "http://169.254.208.81:8008/UEditor/";
</script>

之後再次執行專案可以看到ueditor正常顯示!好了,分享完畢,希望對大家有幫助!

相關文章