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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
js断点调试经验分享
Dec 08 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
Python中的装饰器用法详解
2015/01/14 Python
Python continue继续循环用法总结
2018/06/10 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
硕士研究生自我鉴定范文
2013/12/27 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
小学家长通知书评语
2014/12/31 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
安徽导游词
2015/02/12 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android