在页面写一个编辑框:
<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() {//失去焦点后,将图片同步到textarea this.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"; //ftpuser public 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文件下载链接: https://pan.baidu.com/s/1RQ8EjEfN4YVw9Q5ds79Qkw 密码: nyxd