在页面写一个编辑框:

<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

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. Qt551.窗口滚动条

    1.代码的方式来创建 ScrollArea,然后使用 倒是 正常(有滚动条显示),但是此方式太麻烦 不如直接拖控件来的方便直观快捷. 但是,直接拖控件的方式 ScrollArea中无法显示出 滚动条, ...

  2. JQuery 数组获取和删除元素

    <script> var target = []; target [0] = "aaa000"; target [1] = "bbb111"; ta ...

  3. MySQL存储过程 游标

    MySQL存储过程  游标 如何在存储过程中使用MySQL游标来遍历SELECT语句返回的结果集 MySQL游标简介 要处理存储过程中的结果集,请使用游标.游标允许您迭代查询返回的一组行,并相应地处理 ...

  4. React文档(十八)最佳性能

    在内部,React使用好几种聪明的技巧去最小化更新UI所需要的DOM操作.对于很多应用来说,使用React会使得构建用户界面非常之快而且不需要做太多专门的性能优化.虽然如此,还是有一些方法可以让你为R ...

  5. spring boot中实现security错误信息本地化

    一.修改messages.properties 找源码中的messages.properties,复制一份放在classpath下,修改你要修改的内容 AbstractUserDetailsAuthe ...

  6. 数据结构与算法之PHP递归函数

    一.递归函数的定义 递归函数即自调用函数,在函数体内部直接或者间接的自己调用自己,即函数的嵌套调用是函数本身. 通常在此类型的函数题中会附加一个条件判断叙述,以判断是否需要执行递归调用,并且在特定的条 ...

  7. java Arrays常用方法

    1. 简介 Arrays类包含用于操作数组的各种方法(例如排序和搜索).此类还包含一个静态工厂,允许将数组视为列表. 如果指定的数组引用为null,则此类中的方法都抛出NullPointerExcep ...

  8. gevent模块学习(四)

    gevent.spawn会对传入的子任务集合进行调度,gevent.joinall 方法会阻塞当前程序,除非所有的greenlet都执行完毕,才会退出程序 公有方法 gevent.spawn(cls, ...

  9. iOS启动速度优化

    背景 7月26号我们阿里数据iOS端发布了4.4.0版本,这次版本主要是优化了性能,其中main()阶段的启动耗时优化成果比较明显,从之前的0.5-0.7秒,降低为目前的0.1-0.2秒(main() ...

  10. SQLite数据库 简介、特点、优势、局限性及使用

    SQLite简介 SQLite是一个进程内的轻量级嵌入式数据库,它的数据库就是一个文件,实现了自给自足.无服务器.零配置的.事务性的SQL数据库引擎.它是一个零配置的数据库,这就体现出来SQLite与 ...