万象时代LOGO

新闻资讯

News

Kindeditor过滤样式、css,不过滤HTML标签

DATE:2015-04-22 已浏览
443


很多朋友在使用Kindeditor编辑器的时候都会遇到这样一个问题,如:给A标签加上title属性过后,浏览的时候,却神奇般地发现title属性没有了。再次切换html源代码的时候,返现编辑器将title属性给删掉了。追究其根本原因主要是kindeditor设置了标签和属性的默认过滤机制。

一、如何控制kindeditor编辑器不过滤任何标签?
主要设置是在页面内创建kindeditor编辑器的时候,设置其filterMode属性为true/false来决定是否开启过滤机制。代码如下所示:

KindEditor.ready(function (K) {
            editor = K.create('textarea[name="content"]', {
                filterMode: false,//是否开启过滤模式
           });
});
二、如何设置Kindeditor编辑器只保留某些标签和属性? 面对这样一个问题,我们可以通过设置其htmlTags属性来得以实现。htmlTags指定要保留的HTML标记和属性。Object的key为HTML标签名,value为HTML属性数组,”.”开始的属性表示style属性。例子如下所示:

htmlTags,
{
        font : ['color', 'size', 'face', '.background-color'],
        span : [
                '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height'
        ],
        div : [
                'align', '.border', '.margin', '.padding', '.text-align', '.color', 'css',
                '.background-color', '.font-size', '.font-family', '.font-weight', '.background',
                '.font-style', '.text-decoration', '.vertical-align', '.margin-left'
        ],
        table: [
                'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'bordercolor', 'css',
                '.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',
                '.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration', '.background',
                '.width', '.height', '.border-collapse'
        ],
        'td,th': [
                'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor', 'css',
                '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',
                '.font-style', '.text-decoration', '.vertical-align', '.background', '.border'
        ],
        a : ['href', 'target', 'name'],
        embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
        img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
        'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
                'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
        ],
        pre : ['class'],
        hr : ['class', '.page-break-after'],
        'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : []
}

定义每个标签的保留属性,记住形如这样的类型‘.font-size’ 主要是表示其属于标签内的style属性内的样式。形如’src’这一类的,就表示标签的直接属性,比如我们在内容编辑的时候给div或者table添加的css,就可以通过在相应的div或者table,td,th后面添加”css”即可保证css不会被过滤掉。 综上所述,通过以上两种方式即可实现kindeditor编辑器的标签和属性过滤效果。