提到富文本,可能你們都用到過百度的ueditor,做爲一個重量級的插件,總結起來一句話,功能很強大,使用很費心。不知道是否是過久沒有維護了,ueditor的文檔可讀性還真是差也多是悟性不夠吧。本文也不是使用教程,只是簡單總結一下如何更改字體設置爲rem。css
由於ueditor是pc端的富文本,因此一切字體大小都是以px爲單位,可是咱們項目須要在移動端來顯示,而且移動端的項目都相似淘寶flexible那樣作了高清屏幕的適配,這樣原本來本的pc上的發佈的內容在app上可能就張下面這個樣子了:html
由於高清屏下面,進行了viewport的縮放,因此固定的px就不適用了。程序員
解決方法有兩個:app
一、移動端直接放棄適配方案,不過這樣仍是要對圖片進行一下處理,設置個width:100%不然屏幕就被撐開了。dom
二、在ueditor編輯的時候,根據與app相同的策略來使用rem來代替其固有的px,同時頁面根元素設置與app使用的font-size字體
對比而言,確定第一種比較快,但仍是繞過去了問題,第二個就要閱讀源碼了,仍是讓咱們一塊兒來看一下如何進行第二種方案。 flex
詳細來講,第二種方案要求有下面這麼兩個:ui
一、pc上html設置font-size與app保持一致(咱們以50px爲例),確保dpr爲1狀況下相同元素在pc和app兩端是相同的的。例如14px,在app屏幕dpr爲1(即非高清屏)的狀況下爲0.28rem,一樣在pc上也應該爲0.28rem。也就是將ueditor中的字體選項10-28px的選項對應*0.02。this
二、考慮咱們的用戶並不知道rem,因此展現仍是要是14px這樣的形式 spa
根據上面的要求,要想修改ueditor的源碼,首先得捋一下相關代碼具體在哪,對於ueditor.all.js那幾千行的代碼來講,若是一點點看下去,顯然有點不可取。咱們應該搜索關鍵字。咱們先看一下ueditor字號相關的部分長什麼樣子:
能夠看到這部分的特殊的class是edui-for-fontsize,只有一個,代碼以下
到這裏你們應該就能夠看出來設置字體和顯示的地方了,具體看代碼
1 // @todo 修改成rem 2 // var size = list[i] + 'px'; 3 var size = (list[i]*2/100 )+ 'rem'; 4 items.push({ 5 // 字體欄顯示的大小選項,這裏仍是顯示px 6 label:list[i]+'px', 7 // 真正的值 8 value:size, 9 theme:editor.options.theme, 10 // 能夠從這裏看出來,this.label顯示 font-size就是字體大小了 11 renderLabelHtml:function () { 12 return '<div class="edui-label %%-label" style="line-height:1;font-size:' + 13 this.value + '">' + (this.label || '') + '</div>'; 14 } 15 });
到這裏起碼看起來像那麼回事了,展現的是px實際上是rem。可是還有一個問題,每次切換字體大小以後都會變爲0rem。
這個就太神奇了,明明沒有零的存在呀。確定是ueditor作了計算而後得出的。下面就是打斷點尋找了。這個過程就不贅述了。發現了下面這段代碼:
// 當修改字體的時候回去進行計算,由於px確定是整數,因此會進行下面的作法 // 可是咱們轉成rem以後就是0.n,這樣就有問題了 var styleVal = domUtils.getComputedStyle(startNode, style), tmp = /^([\d\.]+)(\w+)$/.exec( styleVal ); if( tmp ) { // @todo 修復計算問題,若是rem結尾說明是自身修改,改變計算方法 if(tmp[2] == 'rem'){ return parseInt(tmp[1] * 50) + 'px' } // 計算出來以後,0.nrem獲得的只是orem return Math.floor( tmp[1] ) + tmp[2]; } return styleVal; }
改完以後能夠查看下顯示,正常了。可是好像設置了以後字體並無真正的那麼大。這又是爲何呢?
老辦法,直接打開控制檯查看吧,看這段p究竟是什麼樣式。
能夠看出來這裏確實是對應的0.72rem了,html是50px的基礎size的話,爲何不生效呢。且慢,咱們看一下輸入框裏的內容都是嵌在iframe裏的,這下就明白了,咱們給iframe設置個font-size就行了。在ueditor->theme->iframe.css下面咱們能夠進行設置
到這裏咱們的改造就基本完成了。
前面提到了,本文不是ueditor的教程,可能大神會有更簡潔的方式。看起來也就這麼點代碼量,涉及的東西也很少,但當時確實花了我很多的時間。對我而言可能更多的收穫仍是解決和定位問題的能力的鍛鍊。其實對於咱們程序員來講修bug的能力是至關重要的,不只僅是本身寫出來的,也許是第三方插件的,也許正常狀況下不是問題,可是用到咱們具體的場景下某些條件就成了限制。最難修的永遠是別人的bug,遇到這種狀況,最重要的不盲目和自信,繞過去的問題永遠是你的問題,勇於去迎接挑戰才能提高本身。