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小技巧之生成html元素
May 15 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
小程序实现密码输入框
Nov 16 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript