话不多少，直接进入话题。
首先需要在前端页面中引入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")@ResponseBodypublic Map uploadTextNewsPhoto(@RequestParam("imgFile") MultipartFile[] uploadFiles, HttpServletRequest request) {}
后台代码的实现没有给大家粘贴，因为每个程序员上传的业务可能会不同，所以我也没给大家粘贴。目的为了不误导大家，并且为了博客的简洁工整。
这里说的是js中kindeditor的uploadJson的属性值对应的是后台controller中的requestMapping的属性值。
filePostName的属性值应该对应的是后台controller中的RequestParam的属性值，注意我说的是应该，我没有尝试，大家可以尝试一下。
因为kindeditor 中已经默认与后台对应文件名称为imgFile ，所以为了方便，我就没有尝试其他的。
我们可以点击kindeditor 上的这个小图标进行上传。
只要是上传成功，图片也会自动显示在文本框中。
今天就先给大家讲到这里，下篇为大家讲一下。js将kindeditor 富文本内容进行js中的encodeURIComponent方法进行编码，传给后台，后台在进行解码，在前端修改或者是查看时，让富文本的内容在前端进行展示。
还有就是控制富文本显示上传图片后的尺寸大小。
谢谢大家
这辈子坚持与不坚持都不可怕，怕的是独自走在坚持的道路上。
欢迎加入技术群聊！
