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 密码强弱度检测万能插件
Feb 25 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
跟我学习javascript的this关键字
May 28 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
JavaScript实现切换多张图片
Jan 27 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实现mysql事务处理的方法
2014/12/25 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
pandas中Timestamp类用法详解
2017/12/11 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python实现按首字母分类查找功能
2019/10/31 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
优秀党员申报材料
2014/12/18 职场文书
语文教师个人工作总结
2015/02/06 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
python实现学生信息管理系统(面向对象)
2022/06/05 Python