【kindeditor】kindeditor的使用
官网: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的使用相关推荐
- Kindeditor视频上传问题处理
初始的时候,video这个标签kindeditor是不识别的,只要html处理或者全屏的时候,都会被排除掉.如果想要video存在,则需要设置属性filterMode :false 如果只是想要某个标 ...
- kindeditor用法简单介绍(转)
1,首先去官网下载http://www.kindsoft.net/ 2,解压之后如图所示: 由于本人做的是用的是JSP,所以ASP,PHP什么的就用不上了,直接把那些去掉然后将整个文件夹扔进Myecl ...
- Kindeditor放置两个调用readonly错误
开始 需要调用Kindeditor中的readonly的方法,但是一直提示edit is undefined 而editor.readonly(true)又只对第一个对象有效 所以只能换换形式,干脆将 ...
- django23:BS4/kindeditor上传图片
BS4 Beautiful Soup,Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式. 安装 ...
- asp.net中两款文本编辑器NicEdit和Kindeditor
分类: C#/ASP.Net 2012-10-09 22:35 665人阅读 评论(0) 收藏 举报 文本编辑asp.nettextboxserveraspsafari 目录(?)[+] 做过Web开 ...
- kindeditor项目集成
2019独角兽企业重金招聘Python工程师标准>>> 本文介绍了kindeditor编辑器与java web进行集成,实现文章内容的上传,查询与修改,由于kindeditor图片默 ...
- KindEditor在eclipse里的配置方法
KindEditor介绍: kindEditor是一款国产富文本编辑器,类似fckeditor和目前比较流行的百度Ueditor.其产品官方网站为http://kindeditor.net/ Kind ...
- Kindeditor图片粘贴上传(chrome)
图片粘贴后设置图片属性可参看:https://blog.csdn.net/Dongguabai/article/details/100399904 kindeditor4.1.x版本已支持图片批量上传 ...
- 国产网页在线编辑器kindeditor的使用
作为以前在使用fckeditor,后来浏览器更新后发现fck编辑不好用(而且是致命的问题,根本不能编辑),而且界面也做的不怎样!后来发现国产中有一款开源的网页在线编辑器,试了一下感觉效果很不错!使用也 ...
- kindeditor=4.1.5上传漏洞复现
0x00 漏洞描述 漏洞存在于kindeditor编辑器里,你能上传.txt和.html文件,支持php/asp/jsp/asp.net,漏洞存在于小于等于kindeditor4.1.5编辑器中 这里 ...
最新文章
- crash工具解析_IDA反汇编静态调试Android平台C++的so文件Crash入门
- 【简讯】微软拟发布开源VB6
- 兄弟机cnc系统面板图解_FANUC软操作面板的应用介绍,真的太详细了
- Dubbo-go 服务代理模型
- HDOJ3791 二叉搜索树
- 排序(2):直接插入排序
- python网页调用摄像头_Python调用摄像头
- 毫秒和秒的换算工具_使用后戒不掉的文档搜索工具:Everything
- 基于安卓Android银行排队叫号系统设计与实现
- 在Xcode编译的时候,报这个错误"library not found for -
- 联想 计算机无线网络设置方法,在Windows XP下如何配置无线网络
- 信息安全专业学习规划
- SQL数据库-第一次试验-表与视图的基本操作
- java调色板代码_简易网页调色板功能调用代码_html
- 【操作系统】简易文件系统设计
- 数据结构与算法之多路查找树(2-3树、2-3-4树、B树、B+树)
- ML-Gradient Boost Decision Tree(+ Treelink)
- semi-continuous(半连续性)
- 查看网页源码的编码格式
- python编写坦克大战过程