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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
js变量提升深入理解
Sep 16 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
基于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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
php 多文件上传的实现实例
2016/10/23 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
PHP常用的三种设计模式
2017/02/17 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
竞聘演讲稿开场白
2014/08/25 职场文书
高中学校对照检查材料
2014/08/31 职场文书
百家讲坛观后感
2015/06/12 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS