UEditor樣式被過濾無法顯示問題

前言：

         上周開發中有用到開源的富文本編輯器UEditor，在使用的過程中遇到了樣式被過濾無法顯示問題，經過一番折騰終解決，此外，還有一些關于擷取前台界面元素的一些總結。

1. UEditor樣式被過濾無法顯示問題

         上周有用到百度開源的富文本編輯器----UEditor.不得不說這個富文本編輯器做的真的很贊，個人覺得比CKeditor要好用很多，效果也很不錯。

但是在使用的過程中，有遇到在向文本編輯器插入HTML文本時，添加的樣式老是被過濾掉，找了很多的資料，并結合最新的版本，整理了下如何解決樣式過濾的方法。

我們在富文本編輯頁點選HTML小圖示，切換到HTML模式，然後在該模式下加入如下HTML：

<style type=         "text/css"         >         
         .bg{ background:lightbule;}        
         </style>        
          <div          class         =         "bg"         >         
         Hello EveryBody Welcome To UEditor World!        
         </div>      

以上的html意思很簡單，就是為div加了一個名為bg 的樣式，

然後我們再點選HTML圖示，轉換到預覽頁，可以看到我們的div的背景色并沒有任何的變化，而且我們在div之前寫的樣式，也沒有被渲染，

反而是以文本的形式顯示了出來。

F12檢視整個頁面，發現我們之前寫的樣式和标簽都被渲染成如下的html：

<div style=         "display: none;"          cdata_tag=         "style"          type=         "text/css"         >         
         <p>        
         Hello EveryBody Welcome To UEditor World!        
         </p>      

由以上代碼可以看出，我們的style标簽被轉換成了div，并且設定樣式為不可見，我們的div标簽被轉換成了p标簽。

這說明編輯器本身自己做了一個轉換，類似于一個過濾吧，可能是為了出于安全性考慮，防止使用者在前段輸入非法的代碼、腳本等，事實上我覺得這有點多此一舉，

既然都讓富文本編輯了，不能寫html腳本，還叫什麼富文本。

然後我們再點選HTML圖示，看看HTML試圖，内容如下：

<style type=         "text/css"         >.bg{ background:lightbule;}</style>         
         <p>        
         Hello EveryBody Welcome To UEditor World!        
         </p>      

me.setOpt('allowDivTransToP',false);
//預設的過濾處理
//進入編輯器的内容處理
然後再接着下邊的addInputRule方法中将switch代碼段中的case style,script都給注釋或者删掉。
me.addInputRule(function (root) {
var allowDivTransToP = this.options.allowDivTransToP;
var val;
//進行預設的處理
root.traversal(function (node) {
if (node.type == 'element') {
if (!dtd.$cdata[node.tagName] && 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下的case style 和script
switch (node.tagName) {
case 'a':
if (val = node.getAttr('href')) {
node.setAttr('_href', val)
}
break;