開發中有用到開源的富文本編輯器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>

結合以上分析得出，該編輯器內部過濾機制是將style標記轉換為div，而將div等標簽以p替代。如何解決呢？

之前有在網上查過相關的資料，都說是在配置文件里有一個黑白名單，然后就在配置文件里找了下，在最新版本的腳本文件里怎么找也沒找到那個所謂的黑白名單，

當然了，沒有黑白名單也照樣可以解決問題的。

首先在ueditor.all.js文件內搜索allowDivTransToP,找到如下的代碼，將true設置為false

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 和scriptswitch (node.tagName) {case 'a':if (val = node.getAttr('href')) {node.setAttr('_href', val)}break;

完成以上操作之后，保存即可。再次插入html時，樣式就可以顯示了。

解釋一下以上操作的意義。

第一步將allowDivTransToP設置為false是因為默認的設置是將div自動轉換為p，這樣寫好的樣式就找不到相應的div

了，所以才渲染不上的。

第二步將addInputRule函數中的switch 代碼段中的case style ，script選擇給刪除或者注釋，是為了避免出現編輯器將style或script自動的轉換成別的標簽。

好了，大家可以試一試，看看效果。

2.JQuery.attr()與JQuery.css()的區別

     之前一直沒太區分attr()與css,今天好好看了下，css和attr作用的范圍不同，css主要是用來設置樣式的，也就是style內的東西，而attr主要是用來設置屬性的，比如元素的title，name、style等這些都可以稱之為屬性，舉例說明

  <input  id="btn"  type="button" value="確定” />

我們可以用$("#btn").css("background","green");為該按鈕設置一個背景色，

而如果我們這樣寫$("#btn").attr("background","green");不但按鈕的背景色不會發生變化，相反該按鈕在頁面渲染之后又多了一個background的屬性，請注意，這里是屬性，而不是style里邊的background，頁面的渲染如下：

<input  id="btn"  type="button" value="確定”  background="green" />