国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

使用ueditor富文本編輯器導(dǎo)出文本內(nèi)容時(shí),自定義各個(gè)標(biāo)簽的屬性,以img標(biāo)簽添加最大寬度為例(v

GeekGhc / 1505人閱讀

摘要：現(xiàn)在在做的項(xiàng)目是一個(gè)對(duì)功能要求比較高的項(xiàng)目同時(shí)也有端的開(kāi)發(fā)項(xiàng)目中有一個(gè)場(chǎng)景就是在端通過(guò)富文本編輯的內(nèi)容要在端顯示測(cè)試的時(shí)候發(fā)現(xiàn)有一些圖片超出了手機(jī)的最大寬度會(huì)出現(xiàn)一個(gè)橫向的滾動(dòng)條這樣很影響體驗(yàn)做顯示這塊的是公司做和的同事他們拿到的值富文本直

現(xiàn)在在做的項(xiàng)目是一個(gè)對(duì)功能要求比較高的項(xiàng)目,同時(shí)也有SDK端的開(kāi)發(fā).項(xiàng)目中有一個(gè)場(chǎng)景就是在pc端通過(guò)富文本編輯的內(nèi)容要在SDK端顯示,測(cè)試的時(shí)候發(fā)現(xiàn)有一些圖片超出了手機(jī)的最大寬度,會(huì)出現(xiàn)一個(gè)橫向的滾動(dòng)條,這樣很影響體驗(yàn).做顯示這塊的是公司做android和ios的同事,他們拿到的值富文本直接導(dǎo)出的json格式的html代碼,因此他們很難再對(duì)代碼進(jìn)行二次處理,解決問(wèn)題的源頭又回到了我這里~~
言歸正傳,想要解決問(wèn)題就要從標(biāo)簽的style屬性著手;本人在追蹤數(shù)據(jù)流的時(shí)候發(fā)現(xiàn)了在導(dǎo)出編輯器內(nèi)容的時(shí)候會(huì)把編輯器內(nèi)容全部遍歷一次的地方,遍歷的數(shù)組大概就長(zhǎng)這樣(這其實(shí)是遍歷之后的,理解我的意思就行)

那么重點(diǎn)來(lái)了,以img標(biāo)簽為例,進(jìn)一步處理的數(shù)據(jù)長(zhǎng)這個(gè)樣

在遍歷的時(shí)候會(huì)將attrs進(jìn)行遍歷,遍歷時(shí)候大概就給拆成這樣

這個(gè)時(shí)候就需要在style中插入就行了,這個(gè)地方在ueditor.all.js文件的8726行,或者搜索isElement,在
var attrs = node.attrs;下面加上一段代碼

if(node.tagName==="img"){
   attrs.style?attrs.style.includes("max-width:100%;")?"":attrs.style+="max-width:100%;":attrs.style="max-width:100%;"
}

粘完應(yīng)該是這樣的:

說(shuō)明:首先判斷是否是img標(biāo)簽,然后判斷是否有style屬性,最后判斷若是有style屬性,style是否有max-width:100%;字段,若有,則跳過(guò),避免每次導(dǎo)出的時(shí)候重復(fù)賦值.

最后提醒一句,引入的時(shí)候要引入ueditor.all.js,別引ueditor.all.min.js了,這改的不是min.js~~~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/97983.html

相關(guān)文章

  • React中使用UEditor

    摘要：前言本文將介紹筆者在的項(xiàng)目中使用百度的富文本編輯器的過(guò)程。以百度官網(wǎng)的為例，控制臺(tái)輸入為該編輯器注冊(cè)點(diǎn)擊事件，當(dāng)點(diǎn)擊加粗按鈕時(shí)，控制臺(tái)輸出為了避免點(diǎn)擊工具條時(shí)觸發(fā)事件，筆者將自定義的事件全部注釋了。 前言 本文將介紹筆者在React的項(xiàng)目中使用百度的富文本編輯器Ueditor的過(guò)程。注意本文不提供一條龍式的使用方法，只是將使用過(guò)程中的一些實(shí)現(xiàn)思路進(jìn)行總結(jié)，供以參考。react項(xiàng)目中導(dǎo)入...

    firim 評(píng)論0 收藏0

  • React中使用UEditor

    摘要：前言本文將介紹筆者在的項(xiàng)目中使用百度的富文本編輯器的過(guò)程。以百度官網(wǎng)的為例，控制臺(tái)輸入為該編輯器注冊(cè)點(diǎn)擊事件，當(dāng)點(diǎn)擊加粗按鈕時(shí)，控制臺(tái)輸出為了避免點(diǎn)擊工具條時(shí)觸發(fā)事件，筆者將自定義的事件全部注釋了。 前言 本文將介紹筆者在React的項(xiàng)目中使用百度的富文本編輯器Ueditor的過(guò)程。注意本文不提供一條龍式的使用方法，只是將使用過(guò)程中的一些實(shí)現(xiàn)思路進(jìn)行總結(jié)，供以參考。react項(xiàng)目中導(dǎo)入...

    zzir 評(píng)論0 收藏0

  • zx-editor 移動(dòng)端（HTML5）富文本編輯器，可與原生App混合(hybrid)開(kāi)發(fā)

    摘要：移動(dòng)端文檔富文本編輯器，支持圖文混排引用大標(biāo)題無(wú)序列表，字體顏色加粗斜體。可用于獨(dú)立項(xiàng)目開(kāi)發(fā)，也可以用于與原生混合開(kāi)發(fā)。，圖片文件最大尺寸限制，單位，默認(rèn)，編輯器左右內(nèi)邊距，默認(rèn)像素，是否顯示底部工具欄圖片標(biāo)簽連接添加等圖標(biāo)。 ZxEditor 移動(dòng)端HTML文檔（富文本）編輯器，支持圖文混排、引用、大標(biāo)題、無(wú)序列表，字體顏色、加粗、斜體。 可用于獨(dú)立web項(xiàng)目開(kāi)發(fā)，也可以用于與原生A...

    lansheng228 評(píng)論0 收藏0

  • H5學(xué)習(xí)

    摘要：為此決定自研一個(gè)富文本編輯器。本文，主要介紹如何實(shí)現(xiàn)富文本編輯器，和解決一些不同瀏覽器和設(shè)備之間的。 對(duì)ES6Generator函數(shù)的理解 Generator 函數(shù)是 ES6 提供的一種異步編程解決方案，語(yǔ)法行為與傳統(tǒng)函數(shù)完全不同。 JavaScript 設(shè)計(jì)模式 ② 巧用工廠模式和創(chuàng)建者模式 我為什么把他們兩個(gè)放在一起講？我覺(jué)得這兩個(gè)設(shè)計(jì)模式有相似之處，有時(shí)候會(huì)一個(gè)設(shè)計(jì)模式不能滿(mǎn)...

    aristark 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<