官网:http://kindeditor.net/demo.php

效果:

0.下载文档

1.引入核心文件(CSS与JS)

  items可以设置需要显示的控件

<!-- 编辑器 -->
<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>
<script>var editor;KindEditor.ready(function(K) {editor = K.create('textarea[name="liuyan.content"]', {resizeType : 1,allowPreviewEmoticons : false,allowImageUpload : true,pasteType : 0, //设置能否粘贴items : [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor','bold', 'italic', 'underline', 'removeformat', '|','justifyleft', 'justifycenter', 'justifyright','insertorderedlist', 'insertunorderedlist', '|','emoticons', 'image', 'link' ]});// 同步数据后可以直接取得textarea的value
        editor.sync();});
</script>

2.页面准备textarea

        <!--编辑留言区域-->发表您的留言:<br /><form action="1.action" method="post" id="liuyanform"><textarea id="liuyan.content" name="liuyan.content"style="width: 100%;" class="el_editorBox"></textarea><input type="hidden" name="liuyan.name"> <br><p id="fabiao" class="btn btn-primary btn-sm" data-toggle="modal"data-target="#add"><span>发表</span></p></form>

3.处理的JS函数

  判断编辑器是否为空以及获取编辑器的值异步ajax提交。

/*** * Created by liqiang on 2017/10/1.*/
$(function() {/*** 提交按钮点击事件,内容不为空 的时候打开模态框输入姓名*/$("#fabiao").click(function() {editor.sync();// 判断内容区是否为空if (editor.isEmpty()) {alert("内容不能为空!");return;}$("#tijiaomotai").modal();});$("#tijiao").click(function() {$("input[name='liuyan.name']").val($("input[name='name']").val());$.ajax({url : 'myBlog/liuyan_addLiuyan.action',data : {'liuyan.content' : editor.html(),'liuyan.name' : $("input[name='name']").val()},type : 'POST',async : true,success : function(data) {alert(data);window.location.href = 'liuyan_getLiuyans.action';},error : function() {}});});});

【kindeditor】kindeditor的使用相关推荐

  1. Kindeditor视频上传问题处理

    初始的时候,video这个标签kindeditor是不识别的,只要html处理或者全屏的时候,都会被排除掉.如果想要video存在,则需要设置属性filterMode :false 如果只是想要某个标 ...

  2. kindeditor用法简单介绍(转)

    1,首先去官网下载http://www.kindsoft.net/ 2,解压之后如图所示: 由于本人做的是用的是JSP,所以ASP,PHP什么的就用不上了,直接把那些去掉然后将整个文件夹扔进Myecl ...

  3. Kindeditor放置两个调用readonly错误

    开始 需要调用Kindeditor中的readonly的方法,但是一直提示edit is undefined 而editor.readonly(true)又只对第一个对象有效 所以只能换换形式,干脆将 ...

  4. django23:BS4/kindeditor上传图片

    BS4 Beautiful Soup,Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式. 安装 ...

  5. asp.net中两款文本编辑器NicEdit和Kindeditor

    分类: C#/ASP.Net 2012-10-09 22:35 665人阅读 评论(0) 收藏 举报 文本编辑asp.nettextboxserveraspsafari 目录(?)[+] 做过Web开 ...

  6. kindeditor项目集成

    2019独角兽企业重金招聘Python工程师标准>>> 本文介绍了kindeditor编辑器与java web进行集成,实现文章内容的上传,查询与修改,由于kindeditor图片默 ...

  7. KindEditor在eclipse里的配置方法

    KindEditor介绍: kindEditor是一款国产富文本编辑器,类似fckeditor和目前比较流行的百度Ueditor.其产品官方网站为http://kindeditor.net/ Kind ...

  8. Kindeditor图片粘贴上传(chrome)

    图片粘贴后设置图片属性可参看:https://blog.csdn.net/Dongguabai/article/details/100399904 kindeditor4.1.x版本已支持图片批量上传 ...

  9. 国产网页在线编辑器kindeditor的使用

    作为以前在使用fckeditor,后来浏览器更新后发现fck编辑不好用(而且是致命的问题,根本不能编辑),而且界面也做的不怎样!后来发现国产中有一款开源的网页在线编辑器,试了一下感觉效果很不错!使用也 ...

  10. kindeditor=4.1.5上传漏洞复现

    0x00 漏洞描述 漏洞存在于kindeditor编辑器里,你能上传.txt和.html文件,支持php/asp/jsp/asp.net,漏洞存在于小于等于kindeditor4.1.5编辑器中 这里 ...

最新文章

  1. crash工具解析_IDA反汇编静态调试Android平台C++的so文件Crash入门
  2. 【简讯】微软拟发布开源VB6
  3. 兄弟机cnc系统面板图解_FANUC软操作面板的应用介绍,真的太详细了
  4. Dubbo-go 服务代理模型
  5. HDOJ3791 二叉搜索树
  6. 排序(2):直接插入排序
  7. python网页调用摄像头_Python调用摄像头
  8. 毫秒和秒的换算工具_使用后戒不掉的文档搜索工具:Everything
  9. 基于安卓Android银行排队叫号系统设计与实现
  10. 在Xcode编译的时候,报这个错误"library not found for -
  11. 联想 计算机无线网络设置方法,在Windows XP下如何配置无线网络
  12. 信息安全专业学习规划
  13. SQL数据库-第一次试验-表与视图的基本操作
  14. java调色板代码_简易网页调色板功能调用代码_html
  15. 【操作系统】简易文件系统设计
  16. 数据结构与算法之多路查找树(2-3树、2-3-4树、B树、B+树)
  17. ML-Gradient Boost Decision Tree(+ Treelink)
  18. semi-continuous(半连续性)
  19. 查看网页源码的编码格式
  20. python编写坦克大战过程

热门文章

  1. Sass 基本特性-基础 笔记
  2. IOS自定义UITableViewCell的高亮背景色
  3. AIR ANE(本机扩展)使用中的一些问题(Android平台)
  4. liunx安装jdk,实测有效
  5. GSM信道(控制信道和业务信道)转自搜狗百科
  6. CodeForces - 468A 24 Game
  7. 利用react native创建一个天气APP
  8. hdu2089 不要62
  9. STM32库中自定义的数据类型
  10. POJ 3125 Printer Queue(队列,水题)