在页面写一个编辑框：
<textarea name="content" class="form-control" id="content" required="true" style="width: 90%; height: 360px;"></textarea>
页面导入css和js文件：
<link rel="stylesheet"href="/static/kindeditor/themes/default/default.css" /><script charset="utf-8"src="/static/kindeditor/kindeditor-min.js"></script><script charset="utf-8" src="/static/kindeditor/lang/zh_CN.js"></script>
富文本上传图片的javascript代码：
<script th:inline="javascript">var editor;KindEditor.ready(function(K) {editor = K.create('#content', {resizeType : 1,allowPreviewEmoticons : false,allowImageUpload : true,//允许上传图片allowFileManager : true,//允许对上传的图片进行管理uploadJson : 'kindEditorUpload?paFileName='+ (new Date()).valueOf(),//上传图片至后台afterUpload : function(date) {//图片上传完成后的逻辑操作//alert(date);this.sync();},afterCreate: function () { //是同步KindEditor的值到textarea文本框this.sync();}, afterBlur : function() {//失去焦点后，将图片同步到textareathis.sync();},items : [ 'source', 'fontname', 'fontsize', '|', 'forecolor','hilitecolor', 'bold', 'italic', 'underline','removeformat', '|', 'justifyleft', 'justifycenter','justifyright', 'insertorderedlist', 'insertunorderedlist','|', 'image', 'multiimage', 'emoticons', 'link','fullscreen', 'insertfile' ] });});</script>
图片上传到ftp服务器的后台java代码：
public void kindEditorUploadFile(HttpServletRequest request, HttpServletResponse response,@RequestParam("imgFile") MultipartFile file) throws IOException {ModelMap map = new ModelMap();Gson gson = new Gson();// 图片的项目路径paFileName = request.getParameter("paFileName");System.out.println("paFileName:" + paFileName);try {FtpUtil ftpUtil = new FtpUtil();FTPClient ftp = ftpUtil.getConnectionFTP(UploadFileUrlUtil.HOST_NAEM, UploadFileUrlUtil.PORT,UploadFileUrlUtil.USER_NAME, UploadFileUrlUtil.PASSWORD);SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");// 图片上传的文件名String originalFilename = file.getOriginalFilename();String fileExt = originalFilename.substring(originalFilename.lastIndexOf(".") + 1).toLowerCase();newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;dirName = request.getParameter("dir");if (dirName == null) {dirName = "image";dirName = "file";}String path = UploadFileUrlUtil.IMAGE_FILE + dirName + "/" + paFileName + "/";boolean bool = ftpUtil.uploadFile(ftp, path, newFileName, file.getInputStream());if (bool) {url = UploadFileUrlUtil.HOST + path + newFileName;String attAddress = path + newFileName;System.out.println(url);map.put("url", url);System.out.println("上传成功！");boolean boolClose = ftpUtil.closeFTP(ftp);if (boolClose) {System.out.println("关闭ftp连接成功！");} else {System.out.println("关闭ftp连接失败！");}} else {System.out.println("上传失败！");}} catch (Exception e1) {// TODO Auto-generated catch block e1.printStackTrace();}PrintWriter writer = response.getWriter();map.put("error", 0);writer.println(gson.toJson(map));}
远程ftp服务器的配置信息：
// 远程服务器的配置信息public final static String HOST_NAEM="127.0.0.1";public final static Integer PORT=21;public final static String USER_NAME="123456"; //ftpuserpublic final static String PASSWORD="123456";public final static int LOCALHOST= 8080;public final static String IMAGE_FILE= "/upload/";//图片上传的路径public final static String HOST= "http://127.0.0.1:8080";//上传的端口
富文本KindEditor文件下载链接：/s/1RQ8EjEfN4YVw9Q5ds79Qkw 密码: nyxd
