搭建環境
- 前去官網下載kindeditor需要的js文件。
- 解壓出來後選擇部分文件導入到項目中(紅線是不要的)。
![]()
- 導進項目後的目錄如下(不要忘記導入 jQuery)
![]()
編寫代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Hello,kindeditor</h2>
<hr>
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
<strong>HTML內容</strong>
</textarea>
<br>
<br>
<br>
<button id="submit">提交</button>
</body>
<script charset="utf-8" src="/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="/jquery.min.js"></script>
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id',{
filePostName : "uploadFile",
uploadJson : '/uploadImg',
allowFileManager : true,
allowPreviewEmoticons: true,
allowImageUpload: true,
dir : "image"
});
});
</script>
<script>
$("#submit").click(function () {
alert("完成了點擊.")
})
</script>
</html>
@Controller
public class KindeditorController {
@RequestMapping("/index")
public String index() {
return "index";
}
@ResponseBody
@RequestMapping("/uploadImg")
public JSONObject uploadImg(@RequestParam("uploadFile") MultipartFile multipartFile) throws IOException {
JSONObject jsonObject = new JSONObject();
jsonObject.put("error",0);
jsonObject.put("url","https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2114569028,998077550&fm=26&gp=0.jpg");
return jsonObject;
}
}
注意問題
- 返回數據時 jsonObject.put(“error”,0); error 對應的一定要是數值類型因爲在 kindeditor-all.js 中將返回數值類型的判斷寫了 === 三個等於號，即數值類型也要相同。
![]()
- springboot 2 是使用tomcat9作爲服務器，而tomcat9 加強就字符判斷的安全性。所以在kindeditor上使用顏色時需要將 #FF0000 這種類型改爲 red 這種英文的類型。
![]()
擴展內容：擴展內容
我的github主頁：github
