話不多少，直接進入話題。
首先需要在前端頁面中引入kindeditor 庫
<script src="../js/kindeditor-all.js"></script>
標註黃色的是重點，必須引入
其次寫前端代碼,注意我這個前端代碼是springboot推薦的themleaf寫的，其他的前端代碼可能會有些區別，大家區別對待。
定義一個文本域
<textarea id="editor_id" name="photoContent" style="width:1100px;height:450px;">
</textarea>
<script>
var editor; //在js中定義一個變量
KindEditor.ready(function(K) {
editor = K.create('textarea[name="photoContent"]', {
// filePostName:"uploadFile", //默認與後臺對應文件名稱爲imgFile
allowFileManager : true,
allowImageUpload:true,//允許上傳圖片 打開本地上傳圖片功能
items:['fontname', 'fontsize', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'removeformat', 'justifyleft', 'justifycenter', 'justifyright',
'insertorderedlist', 'insertunorderedlist', 'emoticons', 'image', 'insertfile'
],
uploadJson: "uploadTextNewsPhoto", //上傳圖片的後臺接口路徑
allowImageRemote: false,
afterBlur: function(){this.sync();}, ////失去焦點時，將上傳內容同步到textarea中
afterUpload : function(url, data, name) { //上傳文件後執行的回調函數，必須爲3個參數
if(name=="image" || name=="multiimage"){ //單個和批量上傳圖片時
var img = new Image();
img.src = url;
img.onload = function(){ //圖片必須加載完成才能獲取尺寸
}
}
}
});
});
</script>
這個就是kindeditor 的效果圖。
注意的是items的屬性值，大家可以按照需求來寫，他是對應着富文本上方的功能，具體怎麼寫，大家可以自行百度，網上一大堆。
後臺代碼
@RequestMapping("/uploadTextNewsPhoto")
@ResponseBody
public Map uploadTextNewsPhoto(@RequestParam("imgFile") MultipartFile[] uploadFiles, HttpServletRequest request) {}
後臺代碼的實現沒有給大家粘貼，因爲每個程序員上傳的業務可能會不同，所以我也沒給大家粘貼。目的爲了不誤導大家，並且爲了博客的簡潔工整。
這裏說的是js中kindeditor的uploadJson的屬性值對應的是後臺controller中的requestMapping的屬性值。
filePostName的屬性值應該對應的是後臺controller中的RequestParam的屬性值，注意我說的是應該，我沒有嘗試，大家可以嘗試一下。
因爲kindeditor 中已經默認與後臺對應文件名稱爲imgFile ，所以爲了方便，我就沒有嘗試其他的。
我們可以點擊kindeditor 上的這個小圖標進行上傳。
只要是上傳成功，圖片也會自動顯示在文本框中。
今天就先給大家講到這裏，下篇爲大家講一下。js將kindeditor 富文本內容進行js中的encodeURIComponent方法進行編碼，傳給後臺，後臺在進行解碼，在前端修改或者是查看時，讓富文本的內容在前端進行展示。
還有就是控制富文本顯示上傳圖片後的尺寸大小。
謝謝大家
這輩子堅持與不堅持都不可怕，怕的是獨自走在堅持的道路上。
歡迎加入技術羣聊！
