kindeditor不过滤标签属性
1、问题:
在富文本编辑器编辑的时候,点击富文本左上角\'HTML代码\'按钮,把自己的html代码放进去,再次点击\'HTML代码\'。
发现自己在div上写的部分属性不见了,其他标签的部分属性也不见了,h5标签section也不见了。
2、解决:
看官方文档 http://kindeditor.net/doc3.php?cmd=config
找到一个属性:filterMode
数据类型:Boolean
true时过滤HTML代码,false时允许输入任何代码。
默认值:false
注: 3.4以前版本的filterMode默认值为true。
3、总结:原来是插件默认帮我们过滤掉了标签的部分属性,把默认的true改为false即可。
4、或者 想要指定某些标签不过滤。
属性:htmlTags
指定要保留的HTML标记和属性。哈希数组的key为HTML标签名,value为HTML属性数组,\".\"开始的属性表示style属性。
数据类型:
默认值:
{
font : [\'color\', \'size\', \'face\', \'.background-color\'],
span : [\'style\'],
div : [\'class\', \'align\', \'style\'],
table: [\'class\', \'border\', \'cellspacing\', \'cellpadding\', \'width\', \'height\', \'align\', \'style\'],
\'td,th\': [\'class\', \'align\', \'valign\', \'width\', \'height\', \'colspan\', \'rowspan\', \'bgcolor\', \'style\'],
a : [\'class\', \'href\', \'target\', \'name\', \'style\'],
: [\'src\', \'width\', \'height\', \'type\', \'loop\', \'autostart\', \'quality\',
\'style\', \'align\', \'allow access\', \'/\'],
img : [\'src\', \'width\', \'height\', \'border\', \'alt\', \' \', \'align\', \'style\', \'/\'],
hr : [\'class\', \'/\'],
br : [\'/\'],
\'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6\' : [\'align\', \'style\'],
\'tbody,tr,strong,b,sub,sup,em,i,u,strike\' : []
}
注:filterMode为true时有效。3.4版本开始属性可设置style,保留所有inline样式。
5、部分代码:
/*定义文本域*/
<textarea name=\"content\" id=\"content\" style=\" width: 100%; height:400px\" ><?php echo isset($data[\'content\'])?$data[\'content\']:\'\'?></textarea>
/*引入插件*/
< type=\"text/ \" src=\"<?php echo $cdn_host;?>js/kindeditor-4.1.10/kindeditor.js\"></ >
/*初始化插件*/
< >
$(function(){
KindEditor. Path = \'<?php echo $cdn_host;?>js/kindeditor-4.1.10/\';
setTimeout(function(){
window.editor = KindEditor.create(\'#content\', {
filterMode: false,//是否开启过滤模式
uploadJson: \'/admin/public/upload?type=imgFile\',
/* fileManagerJson: \'?m=upload&f=file_manager_json&is_json=1\',
allowFileManager: true*/
});
},100);
})
</ >
继续阅读与本文标签相同的文章
机器人防尘服机器人防护服的作用
-
数据库实例性能调优利器-Performance Insights最佳实践
2026-05-18栏目: 教程
-
[集合]Collection源码解析(1)
2026-05-18栏目: 教程
-
300+道面试题&最全面试资料,你值得拥有! | Android面试宝典
2026-05-18栏目: 教程
-
小白学Python | 最简单的Django 简明教程
2026-05-18栏目: 教程
-
Jvm-Sandbox源码分析--模块刷新和卸载
2026-05-18栏目: 教程
