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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
javascript实现获取服务器时间
May 19 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
JS常用跨域方法实现原理解析
Dec 09 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中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
python实现静态web服务器
2019/09/03 Python
Django的CVB实例详解
2020/02/10 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
linux下进程间通信的方式
2014/12/23 面试题
十八届三中全会感言
2014/03/10 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
银行求职信怎么写
2014/05/26 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
大学生学年个人总结
2015/02/15 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
详解Python中的for循环
2022/04/30 Python