SSM使用UEditor富文字編輯器

Maven_Han發表於2020-11-06
SSM

富文字編輯器（UEditor）

1. 下載UEditor富文字編輯器

建議下載 utf8-jsp 版本的，結構目錄如下：

下載解壓完成後開啟 index.html 可檢視 ueditor 廬山真面目

2. 建立測試專案

  • 注意：在以下步驟之前，你得有一個搭建完成的SSM框架的專案

2.1 在 SSM 專案的 web 目錄下建立 ueditor 目錄 ，將下載好的目錄解壓並匯入

2.2 在 jsp 檔案加下的 lib 目錄下包含ueditor開發所需jar包，將jar包匯入SSM專案中

  • 匯入專案後可刪除，減小專案的所佔記憶體

3. 建立測試專案

3.1 在web目錄下建立一個 ueditor.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>UEditor測試</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
    <!--建議手動加在語言，避免在ie下有時因為載入語言失敗導致編輯器載入失敗-->
    <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別，比如你在配置專案裡配置的是英文，這裡載入的中文，那最後就是中文-->
    <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
    <style type="text/css">
        div {
            width: 100%;
        }
    </style>
</head>

<body>

<h1>UEditor測試</h1>
<form action="${pageContext.request.contextPath}/ueditor/uploading">
    <div id="editor" type="text/plain" style="width:1024px;height:500px;"></div>
    <input type="submit" value="提交">
</form>

</body>

<script type="text/javascript">
    // 例項化編輯器
    //建議使用工廠方法getEditor建立和引用編輯器例項，如果在某個閉包下引用該編輯器，直接呼叫UE.getEditor('editor')就能拿到相關的例項
    var ue = UE.getEditor('editor');
</script>
</html>

在下載的 utf8-jsp 中的 index.html 有 ueditor 初始化的內容，上述程式碼只是選擇了本次案例所需的內容並進行修改，如果內容不符合讀者所需，可以自行 copy 進行修改

3.2 配置 springmvc.xml

  • 因為 SpringMVC 會把 ueditor 載入所需是資源攔截了，所以需要在 springmvc 的配置檔案中把資源放行
<!--過濾靜態資源-->
<mvc:resources mapping="/ueditor/**" location="/ueditor/"/>

啟動Web專案，你會看到如下

說明此時 ueditor 可以在頁面顯示了

隨便填點東西提交，此時可以發現導航欄如下有以 editorValue 提交的屬性

3.3 建立 UeditorController.java

package com.itheima.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/ueditor")
public class UeditorController {

    @RequestMapping("/uploading")
    public String uploading(String editorValue, Model model){
        // editorValue 為接收富文字編輯器提交的內容
        model.addAttribute("editorValue", editorValue);
        return "ueditorList";
    }
    
}

3.4 編寫 ueditorList.jsp 頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ueditor接收頁面</title>
</head>
<body>
	${editorValue}
</body>
</html>

3.5 測試

在 ueditor.jsp 頁面填寫資訊並點選 提交

會跳轉到 ueditroList.jsp 頁面顯示資訊

此時說明 ueditor 測試完成

注意：如果使用IDEA，並且打包的方式是 war ， 則需要到專案下的 class 路徑去尋找上傳的檔案

  • 如下是我的上傳路徑：

  • 你也可以繼續往下看，按照步驟自定義檔案上傳路徑

4. UEditor配置屬性（需要注意）

1.config.json

1.1 在 config.json 中可以配置 ueditor 的其他屬性，可以根據自己需求進行更改

1.2 從這可以看出我的 Web 專案沒有專案名

相關文章