富文本編輯器（UEditor）
1. 下載UEditor富文本編輯器
建議下載 utf8-jsp 版本的，結構目錄如下：
- 下載地址：鏈接：百度網盤 提取碼：sjxy
下載解壓完成后打開 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">
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
<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 項目沒有項目名
