Kindeditor在线文本编辑器如何过滤HTML


Posted in Javascript onApril 14, 2016

KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写,可以无缝的与Java、.NET、PHP、ASP等程序接合。这个是官网上的介绍。

主页:http://www.kindsoft.net/index.php

下载:http://www.kindsoft.net/down.php

示例:http://www.kindsoft.net/demo.php

在使用kindeditor文本编辑器时遇到的问题,客户直接从Excel里粘贴文本内容到文本编辑器中(能不能再懒一些),然后不调整粘贴内容直接就保存(你敢不敢再懒一些)!对于这种很无语的行径,我只能对他大吼一声,我做一个标签过滤吧,这样你粘贴就不会出现问题了(怂?谁惹得起客户)。

过滤方法也简单:

KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', {
filterMode: true,//是否开启过滤模式
});
});

默认filterMode是关闭状态,首先把filterMode设置为true,然后增加htmlTags,指定要保留的HTML标记和属性。哈希数组的key为HTML标签名,value为HTML属性数组,"."开始的属性表示style属性。数据类型:Object

KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', {
filterMode: true,//是否开启过滤模式
htmlTags : {
font : ['id', 'class', 'color', 'size', 'face', '.background-color'],
div : [
'id', 'class', 'align', '.border', '.margin', '.padding', '.text-align', '.color',
'.background-color', '.font-size', '.font-family', '.font-weight', '.background',
'.font-style', '.text-decoration', '.vertical-align', '.margin-left'
],
a : ['id', 'class', 'href', 'target', 'name'],
embed : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
img : ['id', 'class', 'src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
'id', 'class', 'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
'.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
],
pre : ['id', 'class'],
hr : ['id', 'class', '.page-break-after'],
'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : ['id', 'class'],
iframe : ['id', 'class', 'src', 'frameborder', 'width', 'height', '.width', '.height']
}
});
});

以上所述是小编给大家介绍的Kindeditor在线文本编辑器如何过滤HTML,希望对大家有所帮助!

Javascript 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
详解javascript replace高级用法
Feb 17 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 #Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 #Javascript
javaScript数组迭代方法详解
Apr 14 #Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 #Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 #Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 #Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 #Javascript
You might like
重置版宣传动画
2020/04/09 魔兽争霸
smarty实例教程
2006/11/19 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
Javascript & DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
js select常用操作控制代码
2010/03/16 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
python设计模式大全
2016/06/27 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python统计中文字符数量的两种方法
2019/01/31 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
Django数据统计功能count()的使用
2020/11/30 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
职工运动会邀请函
2014/01/19 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
商务英语专业求职信
2014/06/26 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
2015年党建工作总结
2015/03/30 职场文书