在页面写一个编辑框:

<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文件下载链接: https://pan.baidu.com/s/1RQ8EjEfN4YVw9Q5ds79Qkw 密码: nyxd

转载于:https://www.cnblogs.com/ajya/p/9487264.html

java富文本编辑器KindEditor相关推荐

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

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

  2. easyUI整合富文本编辑器KindEditor详细教程

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

  3. 富文本编辑器 Kindeditor 的使用和 常见错误

    富文本编辑器 Kindeditor 的使用和 常见错误 错误一 问题描述:批量图片上传弹窗中 没有添加图片按钮 原因以及解决:按钮资源(.swf)被拦截 错误二 问题描述:图片上传失败 原因分析:批量 ...

  4. kindeditor java上传_富文本编辑器kindeditor上传图片的配置方法

    [导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下 富文本编辑器上传图片 一.导入kindeditor的js 二.将kindeditor与一个文本域textar ...

  5. 富文本编辑器kindEditor简单教程

    最近需求用到了富文本编辑器.kindEditor一直是我的首选,简单好用,功能挺全. 首先下载kindEdtor资源包. 我这里使用的是jsp,只需要把下列包拷贝到kindEditor文件夹下(Web ...

  6. 11. Django 引入富文本编辑器KindEditor

    打开微信扫一扫,关注微信公众号[数据与算法联盟] 转载请注明出处:http://blog.csdn.net/gamer_gyt 博主微博:http://weibo.com/234654758 Gith ...

  7. java 富文本编辑器的标签处理数据 从数据库中取出 并返回前台

    总结: 1.使用 HtmlUtils.htmlEscape ()方法对 字符串中的标签转义 2.使用 removeHtmlTag() 得数据 具体步骤如下: 我的数据库的存储格式被转义过了,这个因人而 ...

  8. 富文本编辑器KindEditor在前端JS的应用

    1.引入KindEditor资源包 2.页面引入Js,Css文件 3.html代码: <tr><td class="left">讲师信息</td> ...

  9. php 富文本编辑器,开发php接入富文本编辑器KindEditor笔记 | 小灰灰博客

    在做开发的时候,想使用富文本编辑器,小灰灰找了好几个富文本编辑器最终选择了kindeditor编辑器,轻量级的,文件不是很大解压之后也才1M多,而且小灰灰喜欢kind带的清除格式以及一键排版功能,个人 ...

最新文章

  1. linux如何去掉目录背景颜色
  2. PAT甲级1053 Path of Equal Weight (30分) :[C++题解]dfs求树的路径长度、邻接表
  3. python使用内置方法和修饰器方法获取类名、函数名
  4. mysql数据库的后_MySQL数据库误删后的回复技巧
  5. 【蓝桥杯Java_C组·从零开始卷】第三节、while循环do while循环for循环(超重点)break终止循环continue结束本次循环
  6. rabbin负载均衡
  7. UVa12633-Super Rooks on Chessboard-容斥+FFT
  8. 实体词典 情感词典_tidytextpy包 | 对三体进行情感分析
  9. oracle证书洛阳,ORACLE手工建库
  10. neo4j 节点与关系
  11. python学习之简介
  12. QCon北京2015:移动开发最佳实践专题前瞻
  13. 1.编写一个程序,它从标准输入读取C源代码,并验证所有的花括号都正确的成对出现。
  14. 车联网网络安全技术研究
  15. 有哪些让人相见恨晚的记笔记方法?
  16. GUARDED_BY(c) 和 PT_GUARDED_BY(c)
  17. Java实现 kiosk模式,Android中的Kiosk模式
  18. 【极客时间-网络编程实战】
  19. RFID固定资产管理系统,提高工作效率,节省时间-新导智能
  20. python三维图形渲染 地图_Python地图可视化三大秘密武器

热门文章

  1. 细说Asp.net的IP地址屏蔽功能设计
  2. Java类中的权限修饰符
  3. 揭开JVM所看到的try/catch/finally
  4. 用Kettle的一套流程完成对整个数据库迁移 费元星
  5. 第三届蓝桥杯C++本科B组决赛解题报告(更新中)
  6. .bash_pfofile、.bash_logout和.bashrc区别
  7. centos中用MySQL创建新表_CentOS下使用Shell批量创建数据库表
  8. Xilinx 在文档中所用的 LC(logic cells) 与 LUT之间的换算关系
  9. mysql的索引的区别_MYSQL索引区别
  10. zabbix全网监控介绍