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 相关文章推荐
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
Mac下安装vue
Apr 11 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
小程序新版订阅消息模板消息
Dec 31 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
浅谈django orm 优化
2018/08/18 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
python实现学生信息管理系统源码
2021/02/22 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
追悼会主持词
2014/03/20 职场文书
2014年收银工作总结
2014/11/13 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
如何做好工作总结!
2019/04/10 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android