第一步：先上圖
第二部(html代碼)
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="{:url('Admin/Test/add')}" method="post">
<div id="div1">
<p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
</div>
<textarea id="text1" name="lala" style="width:100%; height:200px;"></textarea>
<button>送出</button>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/release/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
var $text1 = $('#text1')
//editor.customConfig.uploadImgServer = '/Admin/Article/upload'; // 上傳圖檔到伺服器
/* 處理上傳圖檔的controller路徑 */
editor.customConfig.uploadImgServer = '/Admin/Test/uploads'; //上傳URL
editor.customConfig.uploadImgMaxSize = 100 * 1024 * 1024;
editor.customConfig.uploadImgMaxLength = 100;
editor.customConfig.uploadFileName = 'file';//服務端接收file的名字
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
// 圖檔上傳并傳回結果，自定義插入圖檔的事件（而不是編輯器自動插入圖檔！！！）
// insertImg 是插入圖檔的函數，editor 是編輯器對象，result 是伺服器端傳回的結果
console.log(result);
// 舉例：假如上傳圖檔成功後，伺服器端傳回的是 {url:'....'} 這種格式，即可這樣插入圖檔：
var url =result.data;
insertImg(url);
// result 必須是一個 JSON 格式字元串！！！否則報錯
}
}
editor.customConfig.debug = true
editor.customConfig.onchange = function (html) {
// 監控變化，同步更新到 textarea
$text1.val(html)
}
editor.create()
// 初始化 textarea 的值
$text1.val(editor.txt.html())
</script>
</body>
</html>
第三部 ：TP5上傳圖檔代碼
public function uploads()
{
$file = request()->file('file');
//上傳回調error為0
if(empty($file)){
$result["error"] = "1";
$result['data'] = '';
}else{
// 移動到架構應用根目錄/public/uploads/ 目錄下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/editor' );
if($info){
$name_path =$info->getSaveName();
//成功上傳後 擷取上傳資訊
$name_path =str_replace('\\',"/",$info->getSaveName());
$result["error"] = '0';
$result['data'] = "/uploads/editor/".$name_path;
}else{
// 上傳失敗擷取錯誤資訊
$result["code"] = "2";
$result['data'] ='';
}
}
exit(json_encode($result));
}
第四部:post方法送出就可以，使用ajax送出也是一樣的，這樣就完成了，遇到問題可以在底部給我留言，我會幫你們一一解答
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)