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 相关文章推荐
用JAVASCRIPT如何给<textarea></textarea>赋值
Apr 20 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
JavaScript ES6的函数拓展
Jan 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
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP中->和=>的含义及使用示例解析
2020/08/06 PHP
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
详解python中__name__的意义以及作用
2019/08/07 Python
python中PyQuery库用法分享
2021/01/15 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
纽约手袋品牌:KARA
2018/03/18 全球购物
医校毕业生自我鉴定
2014/01/25 职场文书
老师对学生的寄语
2014/04/09 职场文书
论文诚信承诺书
2014/05/23 职场文书
2014个人年度工作总结
2014/12/15 职场文书
阿凡达观后感
2015/06/10 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
Elasticsearch 配置详解
2022/04/19 Java/Android