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 相关文章推荐
JS 字符串连接[性能比较]
May 10 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
JavaScript常用工具函数大全
May 06 Javascript
canvas 中如何实现物体的框选
Aug 05 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生成静态页
2006/11/25 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
Python解析nginx日志文件
2015/05/11 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python实现选择排序
2017/06/04 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Python之时间和日期使用小结
2019/02/14 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
外贸采购员求职的自我评价
2013/11/26 职场文书
领导的自我鉴定
2013/12/28 职场文书
模范教师事迹材料
2014/02/10 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
python 实现的截屏工具
2021/05/08 Python
css背景和边框标签实例详解
2021/05/21 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS