花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來到素材無憂網(wǎng),按 + 收藏我們
登錄 注冊 退出 找回密碼

織夢ueditor百度編輯器div style被過濾解決辦法

時間: 2020-03-13 09:28 閱讀: 作者:素材無憂網(wǎng)

開發(fā)中有用到開源的富文本編輯器UEditor,在使用的過程中遇到了樣式被過濾無法顯示問題,經(jīng)過一番折騰終解決,此外,還有一些關(guān)于獲取前臺界面元素的一些總結(jié)。

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

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

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

我們在富文本編輯頁點(diǎn)擊HTML小圖標(biāo),切換到HTML模式,然后在該模式下加入如下HTML:

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

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

然后我們再點(diǎn)擊HTML圖標(biāo),轉(zhuǎn)換到預(yù)覽頁,可以看到我們的div的背景色并沒有任何的變化,而且我們在div之前寫的樣式,也沒有被渲染,

反而是以文本的形式顯示了出來。F12查看整個頁面,發(fā)現(xiàn)我們之前寫的樣式和標(biāo)簽都被渲染成如下的html:

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

由以上代碼可以看出,我們的style標(biāo)簽被轉(zhuǎn)換成了div,并且設(shè)置樣式為不可見,我們的div標(biāo)簽被轉(zhuǎn)換成了p標(biāo)簽。

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

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

然后我們再點(diǎn)擊HTML圖標(biāo),看看HTML試圖,內(nèi)容如下:

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

結(jié)合以上分析得出,該編輯器內(nèi)部過濾機(jī)制是將style標(biāo)記轉(zhuǎn)換為div,而將div等標(biāo)簽以p替代。如何解決呢?

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

當(dāng)然了,沒有黑白名單也照樣可以解決問題的。

首先在ueditor.all.js文件內(nèi)搜索allowDivTransToP,找到如下的代碼,將true設(shè)置為false

me.setOpt('allowDivTransToP',false);
//默認(rèn)的過濾處理
//進(jìn)入編輯器的內(nèi)容處理
然后再接著下邊的addInputRule方法中將switch代碼段中的case style,script都給注釋或者刪掉。
me.addInputRule(function (root) {
var allowDivTransToP = this.options.allowDivTransToP;
var val;
//進(jìn)行默認(rèn)的處理
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;

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

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

第一步將allowDivTransToP設(shè)置為false是因?yàn)槟J(rèn)的設(shè)置是將div自動轉(zhuǎn)換為p,這樣寫好的樣式就找不到相應(yīng)的div

了,所以才渲染不上的。

第二步將addInputRule函數(shù)中的switch 代碼段中的case style ,script選擇給刪除或者注釋,是為了避免出現(xiàn)編輯器將style或script自動的轉(zhuǎn)換成別的標(biāo)簽。

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

 

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

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

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

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

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

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

版權(quán)聲明: 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布,如果侵犯了您的權(quán)益請與我們聯(lián)系,我們將在24小時內(nèi)刪除!謝謝!

轉(zhuǎn)載請注明: 織夢ueditor百度編輯器div style被過濾解決辦法

標(biāo)簽:  
相關(guān)文章
模板推薦