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 相关文章推荐
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
Javascript中typeof 用法小结
May 12 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
yii框架中的Url生产问题小结
2012/01/16 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php常用hash加密函数
2014/11/22 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
php实现微信发红包
2015/12/05 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
python回调函数的使用方法
2014/01/23 Python
Python实现在线音乐播放器
2017/03/03 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
linux面试相关问题
2012/08/11 面试题
建筑工程管理专业自荐信范文
2013/12/28 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
python处理json数据文件
2022/04/11 Python
python垃圾回收机制原理分析
2022/04/13 Python