[js]使用百度編輯器uediter時遇到的一些問題（span，div等被過濾）

 在使用uediter編輯html代碼的時候，div，span等標簽會莫名其妙的被過濾掉，然后上網查資料，改了點配置：

1：在ueiter.all.js中找到allowDivTransToP

 me.setOpt({
        'allowDivTransToP':true,
        'disabledTableInTable':true
    });

把 true改為false

 me.setOpt({
        'allowDivTransToP':false,
        'disabledTableInTable':true
    });

2:在ueditor.config.js中找到allowDivTransToP

//默認過濾規則相關配置項目
//,disabledTableInTable:true  //禁止表格嵌套
//,allowDivTransToP:true      //允許進入編輯器的div標簽自動變成p標簽
//,rgb2Hex:true               //默認產出的數據中的color自動從rgb格式變成16進制格式

 把true改為false

//默認過濾規則相關配置項目
//,disabledTableInTable:true  //禁止表格嵌套
,allowDivTransToP:false      //允許進入編輯器的div標簽自動變成p標簽
//,rgb2Hex:true               //默認產出的數據中的color自動從rgb格式變成16進制格式

 3在ueditor.config.js中找到whitList白名單

有的地方說直接添加一個div[] span[] 類似於：

但是下面已經配置有這兩項

所以我就根據我的需要，在這兩項中添加了'name','id'就像上圖。如果有其他標簽就再添加

4在ueiter.all.js中找到me.addOutputRule...

把該注釋的注視掉，代碼如下

    //從編輯器出去的內容處理
    me.addOutputRule(function (root) {
        var val;
        root.traversal(function (node) {
            if (node.type == 'element') {
                /*if (me.options.autoClearEmptyNode && dtd.$inline[node.tagName] && !dtd.$empty[node.tagName] && (!node.attrs || utils.isEmptyObject(node.attrs))) {

                    if (!node.firstChild()) node.parentNode.removeChild(node);
                    else if (node.tagName == 'span' && (!node.attrs || utils.isEmptyObject(node.attrs))) {
                        node.parentNode.removeChild(node, true)
                    }
                    return;
                }*/
                switch (node.tagName) {
                    case 'div':
                        if (val = node.getAttr('cdata_tag')) {
                            node.tagName = val;
                            node.appendChild(UE.uNode.createText(node.getAttr('cdata_data')));
                            node.setAttr({cdata_tag: '', cdata_data: '','_ue_custom_node_':''});
                        }
                        break;
                    case 'a':
                        if (val = node.getAttr('_href')) {
                            node.setAttr({
                                'href': utils.html(val),
                                '_href': ''
                            })
                        }
                        break;
                        break;
                    /*case 'span':
                        val = node.getAttr('id');
                        if(val && /^_baidu_bookmark_/i.test(val)){
                            node.parentNode.removeChild(node)
                        }
                        break;*/
                    case 'img':
                        if (val = node.getAttr('_src')) {
                            node.setAttr({
                                'src': node.getAttr('_src'),
                                '_src': ''
                            })
                        }
                }
            }
        })
    });
};

 

5在ueiter.all.js中找到enterTag: 'p',改為：enterTag: '',這一步

 

然后以上的都改完之后，div和span標簽基本上標簽就不會被過濾了，但是悲催的是，我測試的時候span標簽又被過濾了

 

原有代碼：

<div class="td-text fl">
　　<span><p style="margin-top:60px;">初始</p></span>
</div>
<div class="text-one fl">
　　<div class="one-one">
　　　　<span class="fl"><p>掛資質</p></span>
　　　　<span class="fl"><p>1.2W/年</p></span>
　　</div>
　　<div class="one-two">
　　　　<span class="fl"><p>掛項目</p></span>
　　　　<span class="fl"><p>1.3W/年</p></span>
　　</div>
</div>

 

 

 被過濾后的代碼：

 

<div class="td-text fl">
　　<p style="margin-top:60px;">初始</p>
</div>
<div class="text-one fl">
　　<div class="one-one">
　　　　<span class="fl"><p>掛資質</p></span>
　　　　<span class="fl"><p>1.2W/年</p></span>
　　</div>
　　<div class="one-two">
　　　　<span class="fl"><p>掛項目</p></span>
　　　　<span class="fl"><p>1.3W/年</p></span>
　　</div>
</div>

 帶有class的span沒有被過濾，什么都沒有的span被過濾了...什么鬼，怎么會這樣...

 抓耳撓腮半小時之后，偶然的一瞥，看到ueiter.all.js中有一個autoClearEmptyNode:true,抱着試一試的態度，我給改成了false,然后再一試，成了，那個什么都沒有的span標簽沒有被過濾，我又試了好幾次，真的是這個問題~~趕緊記了下來~~哈哈，問題解決~~