ckeditor 过滤器(filter)添加允许规则

环境:ckeditor 4.4.7

需求:当使用了一个自定义按钮插入了规则所不允许的html代码。

editor.insertHtml('<a tips="提示">'+CKEDITOR.tools.htmlEncode("百度")+'</a>',"unfiltered_html");

虽然使用inertHtml()插入了非html所规定的属性,但是点击“源码”多次,a标签里的tips属性会被删除。

在config.js里面添加下面的代码即可。

config.extraAllowedContent = "a[tips]";

过滤器规则可以参考:

1、http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules

2、http://download.csdn.net/detail/jacksoong/5272273

或者

(以下文章来源于:http://www.szfangwei.cn/news/2309.html)

ckeditor前身fckeditor,是国际上资质最老的网页编辑器,而且一直保留开源免费的政策,所以我也一直比较喜欢使用和研究,根据了解,不管是自动生成的代码质量、自由配置度、功能扩展性、浏览器兼容性方面都是非常好的。

这里方维网络就大家经常遇到的编辑器源代码编辑模式时,很多内容标签会被编辑器自动过滤这个问题做下解释,其实ckeditor有个allowedContent属性,可以通过config.js配置,但是默认是开启的,主要功能是规定编辑内容允许的标签、标签的属性(attributes)、标签的样式(style)以及可以使用的类(class).如果要禁用内容过滤,很简单,下面一句话就可以搞定:
在配置config.js文件增加一条配置语句config.allowedContent=true。

但是可能你还会想深入了解allowedContent是怎么控制过滤功能的,比如如何设置允许哪些标签,只允许带哪些属性的标签、过滤什么标签、过滤什么属性、过滤什么样式等。其删除的规则很轻大,下面方维网站建设举个配置示例:
CKEDITOR.replace( 'editor2', {
allowedContent:
'h1 h2 h3 p blockquote strong em;' +
'a[!href];' +
'img(left,right)[!src,alt,width,height];' +
'table tr th td caption;' +
'span{!font-family};' +'
'span{!color};' +
'span(!marker);' +
'del ins'
} );
这个
h1 h2 h3 p blockquote strong em - 编辑器允许这些标签,但是任何属性都会被过滤;
a[!href] - href属性对于a是必须的,也就是如果a没有href的标签也会被过滤,而且其他属性会被过滤;
img(left,right)[!src,alt,width,height] - src属性是img标签必须的. alt, width, height属性可以有,但class属性必须是left或者right
table tr th td caption - 表示这些标签都是允许的
span{!font-family}, span{!color}, span(!marker) - 表示span只接受包含font-family的style或者包含color的style,还有就是包含class=marker的span
del ins - 表示以上标签都被接受,其他都会被过滤。

从这些规则可以看出,ckeditr过滤是非常强大的,里面的水实在太深了,欢迎有兴趣的程序员一起探讨和研究。


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值