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 相关文章推荐
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
给儿子的表扬信
2014/01/15 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
论文评语大全
2014/04/29 职场文书
拉歌口号大全
2014/06/13 职场文书
工会趣味活动方案
2014/08/18 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
2014全年工作总结
2014/11/27 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
清明节随笔
2015/08/15 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
Golang map映射的用法
2022/04/22 Golang