本文共 888 字，大约阅读时间需要 2 分钟。

话不多少，直接进入话题。

首先需要在前端页面中引入kindeditor 库

标注黄色的是重点，必须引入

其次写前端代码,注意我这个前端代码是springboot推荐的themleaf写的，其他的前端代码可能会有些区别，大家区别对待。

定义一个文本域

这个就是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方法进行编码，传给后台，后台在进行解码，在前端修改或者是查看时，让富文本的内容在前端进行展示。 还有就是控制富文本显示上传图片后的尺寸大小。

谢谢大家这辈子坚持与不坚持都不可怕，怕的是独自走在坚持的道路上。欢迎加入技术群聊！

转载地址：http://szoai.baihongyu.com/