在页面写一个编辑框:

  1. <textarea name="content" class="form-control" id="content"
  2. required="true" style="width: 90%; height: 360px;"></textarea>

页面导入css和js文件:

  1. <link rel="stylesheet"
  2. href="/static/kindeditor/themes/default/default.css" />
  3. <script charset="utf-8"
  4. src="/static/kindeditor/kindeditor-min.js"></script>
  5. <script charset="utf-8" src="/static/kindeditor/lang/zh_CN.js"></script>

富文本上传图片的javascript代码:

  1. <script th:inline="javascript">
  2. var editor;
  3. KindEditor.ready(function(K) {
  4. editor = K.create('#content', {
  5. resizeType : 1,
  6. allowPreviewEmoticons : false,
  7. allowImageUpload : true,//允许上传图片
  8. allowFileManager : true,//允许对上传的图片进行管理
  9. uploadJson : 'kindEditorUpload?paFileName='+ (new Date()).valueOf(),//上传图片至后台
  10. afterUpload : function(date) {//图片上传完成后的逻辑操作
  11. //alert(date);
  12. this.sync();
  13. },
  14. afterCreate: function () { //是同步KindEditor的值到textarea文本框
  15. this.sync();
  16. },
  17. afterBlur : function() {//失去焦点后,将图片同步到textarea
  18. this.sync();
  19. },
  20. items : [ 'source', 'fontname', 'fontsize', '|', 'forecolor',
  21. 'hilitecolor', 'bold', 'italic', 'underline',
  22. 'removeformat', '|', 'justifyleft', 'justifycenter',
  23. 'justifyright', 'insertorderedlist', 'insertunorderedlist',
  24. '|', 'image', 'multiimage', 'emoticons', 'link',
  25. 'fullscreen', 'insertfile' ]
  26. });
  27.  
  28. });
  29. </script>

图片上传到ftp服务器的后台java代码:

  1. public void kindEditorUploadFile(HttpServletRequest request, HttpServletResponse response,
  2. @RequestParam("imgFile") MultipartFile file) throws IOException {
  3.  
  4. ModelMap map = new ModelMap();
  5. Gson gson = new Gson();
  6. // 图片的项目路径
  7. paFileName = request.getParameter("paFileName");
  8. System.out.println("paFileName:" + paFileName);
  9.  
  10. try {
  11. FtpUtil ftpUtil = new FtpUtil();
  12. FTPClient ftp = ftpUtil.getConnectionFTP(UploadFileUrlUtil.HOST_NAEM, UploadFileUrlUtil.PORT,
  13. UploadFileUrlUtil.USER_NAME, UploadFileUrlUtil.PASSWORD);
  14. SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
  15. // 图片上传的文件名
  16. String originalFilename = file.getOriginalFilename();
  17. String fileExt = originalFilename.substring(originalFilename.lastIndexOf(".") + 1).toLowerCase();
  18. newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
  19. dirName = request.getParameter("dir");
  20. if (dirName == null) {
  21. dirName = "image";
  22. dirName = "file";
  23. }
  24. String path = UploadFileUrlUtil.IMAGE_FILE + dirName + "/" + paFileName + "/";
  25. boolean bool = ftpUtil.uploadFile(ftp, path, newFileName, file.getInputStream());
  26. if (bool) {
  27. url = UploadFileUrlUtil.HOST + path + newFileName;
  28. String attAddress = path + newFileName;
  29. System.out.println(url);
  30. map.put("url", url);
  31. System.out.println("上传成功!");
  32. boolean boolClose = ftpUtil.closeFTP(ftp);if (boolClose) {
  33. System.out.println("关闭ftp连接成功!");
  34. } else {
  35. System.out.println("关闭ftp连接失败!");
  36. }
  37. } else {
  38. System.out.println("上传失败!");
  39. }
  40.  
  41. } catch (Exception e1) {
  42. // TODO Auto-generated catch block
  43. e1.printStackTrace();
  44. }
  45. PrintWriter writer = response.getWriter();
  46. map.put("error", 0);
  47. writer.println(gson.toJson(map));
  48. }

远程ftp服务器的配置信息:

  1. // 远程服务器的配置信息
  2. public final static String HOST_NAEM="127.0.0.1";
  3. public final static Integer PORT=21;
  4. public final static String USER_NAME="123456"; //ftpuser
  5. public final static String PASSWORD="123456";
  6. public final static int LOCALHOST= 8080;
  7. public final static String IMAGE_FILE= "/upload/";//图片上传的路径
  8. public final static String HOST= "http://127.0.0.1:8080";//上传的端口

富文本KindEditor文件下载链接: https://pan.baidu.com/s/1RQ8EjEfN4YVw9Q5ds79Qkw 密码: nyxd

java富文本编辑器KindEditor的更多相关文章

  1. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  2. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  3. python 全栈开发,Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  4. 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传

    富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...

  5. Django配置富文本编辑器kindeditor

    一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...

  6. JAVAEE——宜立方商城04:图片服务器FastDFS、富文本编辑器KindEditor、商品添加功能完成

    1. 学习计划 1.图片上传 a) 图片服务器FastDFS b) 图片上传功能实现 2.富文本编辑器的使用KindEditor 3.商品添加功能完成 2. 图片服务器的安装 1.存储空间可扩展. 2 ...

  7. Django之富文本编辑器kindeditor 及上传

    1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...

  8. 富文本编辑器kindeditor的使用

    第一步:导入前端js文件 <!-- 富文本编辑器 --> <link rel="stylesheet" href="../plugins/kindedi ...

  9. 在线富文本编辑器kindeditor配置(.Net Framework 3.5)

    下载地址:http://kindeditor.net/down.php 解压放在项目要目录下, 在Bin目录下添加引用:LitJSON.dll 在页面头部加: <link rel="s ...

随机推荐

  1. Demo整合

    1.图片上传:  https://github.com/842549829/WebUploader 2.百度编辑器: https://github.com/842549829/Ueditor 3.安卓 ...

  2. Windows7下Jupyter Notebook使用入门

    目录 一.Jupyter简介 二.Jupyter安装 2.1 python 3安装 2.2 Jupyter 安装 三.Jupyter使用示例 四.Jupyter常用命令 五.其他说明 一.Jupyte ...

  3. 使用vue+iview实现上传文件及常用的下载文件的方法

    首先说明一下,我们这次主要用的还是iview的upload上传组件,下面直接上代码 <Upload ref="upload" multiple='true' //是否支持多文 ...

  4. (7)udp-socket

    # upd 协议:(1)#client 端口:import socketsk = socket.socket(type=socket.SOCK_DGRAM)message = "我来了大哥& ...

  5. 关于被删以及限制评价后,免费更换新listing的方法

    Prime Day 刚过,review被撸空,还限制留评,之后单量一泻千里,广告都花不出去,没办法,按照网上贴出来的教程自己摸索,居然成功了解除了留评限制,优点是不用移仓,省了一比费用,缺点是list ...

  6. element ui的 el-dropdown-item标签点击事件

    在vue项目中使用element的el-dropdown-item标签时 给标签添加click事件 初始时按照正常写法 <el-dropdown-item @click="click( ...

  7. mui预加载

    1.只能加载一个页面 mui.init(); var page = null; mui.plusReady(function() { //预加载页面mui.preload必须放在plusReady事件 ...

  8. Centos7安装Nginx+PHP+MySQL

    之前曾经在服务器上从头到尾搭过一次环境,但那时新手一枚,很多地方搞不定,是前辈帮忙解决的.这次独自一人在服务器上撘环境,感慨上次没有做好相关笔记,所以事后整理一下,下次再搭环境时可以轻车熟路. 一.准 ...

  9. 生成SQL Server数据字典

    1.表信息 Select * FROM INFORMATION_SCHEMA.COLUMNS order by Table_name; select * from INFORMATION_SCHEMA ...

  10. webapi put 404

    windows server 2016  IIS  webapi   404 error In IIS select your website and double-click Handler Map ...