使用filterRules過濾ueditor的內容

1、爲何須要使用filterRules

在使用富文本編輯器ueditor的時候，有時候須要控制內容，例如：不容許帶連接、不容許插入圖片、控制內部html的樣式等等，除了設置toolbars以外，還要保證粘貼到編輯器裏面的內容也能被控制，這時就須要用到filterRules屬性了。

2、如何使用filterRules

ueditor在網站上提供了這樣的功能演示，在http://ueditor.baidu.com/website/examples/裏提供了ueditor的一些高級使用演示。打開頁面的過濾規則定製化連接，按F12查看源代碼，看看百度的示例是怎麼寫的：

UE.getEditor('editor', {
        serverUrl: '/server/ueditor/controller.php',
        filterRules: function () {
            return{
                span:function(node){
                    if(/Wingdings|Symbol/.test(node.getStyle('font-family'))){
                        return true;
                    }else{
                        node.parentNode.removeChild(node,true)
                    }
                },
                p: function(node){
                    var listTag;
                    if(node.getAttr('class') == 'MsoListParagraph'){
                        listTag = 'MsoListParagraph'
                    }
                    node.setAttr();
                    if(listTag){
                        node.setAttr('class','MsoListParagraph')
                    }
                    if(!node.firstChild()){
                        node.innerHTML(UE.browser.ie ? '&nbsp;' : '<br>')
                    }
                },
                div: function (node) {
                    var tmpNode, p = UE.uNode.createElement('p');
                    while (tmpNode = node.firstChild()) {
                        if (tmpNode.type == 'text' || !UE.dom.dtd.$block[tmpNode.tagName]) {
                            p.appendChild(tmpNode);
                        } else {
                            if (p.firstChild()) {
                                node.parentNode.insertBefore(p, node);
                                p = UE.uNode.createElement('p');
                            } else {
                                node.parentNode.insertBefore(tmpNode, node);
                            }
                        }
                    }
                    if (p.firstChild()) {
                        node.parentNode.insertBefore(p, node);
                    }
                    node.parentNode.removeChild(node);
                },
                //$:{}表示不保留任何屬性
                br: {$: {}},
//                a: function (node) {
//                    if(!node.firstChild()){
//                        node.parentNode.removeChild(node);
//                        return;
//                    }
//                    node.setAttr();
//                    node.setAttr('href', '#')
//                },
//                strong: {$: {}},
//                b:function(node){
//                    node.tagName = 'strong'
//                },
//                i:function(node){
//                    node.tagName = 'em'
//                },
//                em: {$: {}},
//                img: function (node) {
//                    var src = node.getAttr('src');
//                    node.setAttr();
//                    node.setAttr({'src':src})
//                },
                ol:{$: {}},
                ul: {$: {}},

                dl:function(node){
                    node.tagName = 'ul';
                    node.setAttr()
                },
                dt:function(node){
                    node.tagName = 'li';
                    node.setAttr()
                },
                dd:function(node){
                    node.tagName = 'li';
                    node.setAttr()
                },
                li: function (node) {

                    var className = node.getAttr('class');
                    if (!className || !/list\-/.test(className)) {
                        node.setAttr()
                    }
                    var tmpNodes = node.getNodesByTagName('ol ul');
                    UE.utils.each(tmpNodes,function(n){
                        node.parentNode.insertAfter(n,node);

                    })

                },
                table: function (node) {
                    UE.utils.each(node.getNodesByTagName('table'), function (t) {
                        UE.utils.each(t.getNodesByTagName('tr'), function (tr) {
                            var p = UE.uNode.createElement('p'), child, html = [];
                            while (child = tr.firstChild()) {
                                html.push(child.innerHTML());
                                tr.removeChild(child);
                            }
                            p.innerHTML(html.join('&nbsp;&nbsp;'));
                            t.parentNode.insertBefore(p, t);
                        })
                        t.parentNode.removeChild(t)
                    });
                    var val = node.getAttr('width');
                    node.setAttr();
                    if (val) {
                        node.setAttr('width', val);
                    }
                },
                tbody: {$: {}},
                caption: {$: {}},
                th: {$: {}},
                td: {$: {valign: 1, align: 1,rowspan:1,colspan:1,width:1,height:1}},
                tr: {$: {}},
                h3: {$: {}},
                h2: {$: {}},
                //黑名單，如下標籤及其子節點都會被過濾掉
                '-': 'script style meta iframe embed object'
            }
        }()
    });

filterRules的屬性是一個函數，返回了內容節點的過濾規則，過濾規則也是函數，提供對應的節點參數node，例如：

span:function(node){
    if(/Wingdings|Symbol/.test(node.getStyle('font-family'))){
       return true;
    }else{
       node.parentNode.removeChild(node,true)
    }
}

這樣一來，咱們就能夠使用filterRules來編寫符合本身需求的過濾規則了。