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 CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
js中运算符&& 和 || 的使用记录
Aug 21 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
基于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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
财经学院自荐信范文
2014/02/02 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
2014年环保工作总结
2014/11/26 职场文书
青年文明号申报材料
2014/12/23 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
Python字典的基础操作
2021/11/01 Python
js 数组 fill() 填充方法
2021/11/02 Javascript
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫