改造百度ueditor字體爲rem及相關體會

  提到富文本,可能你們都用到過百度的ueditor,做爲一個重量級的插件,總結起來一句話,功能很強大,使用很費心。不知道是否是過久沒有維護了,ueditor的文檔可讀性還真是差也多是悟性不夠吧。本文也不是使用教程,只是簡單總結一下如何更改字體設置爲rem。css

  1、問題

  由於ueditor是pc端的富文本,因此一切字體大小都是以px爲單位,可是咱們項目須要在移動端來顯示,而且移動端的項目都相似淘寶flexible那樣作了高清屏幕的適配,這樣原本來本的pc上的發佈的內容在app上可能就張下面這個樣子了:html

由於高清屏下面,進行了viewport的縮放,因此固定的px就不適用了。程序員

  2、解決思路

  解決方法有兩個: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

  3、實現

  根據上面的要求,要想修改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下面咱們能夠進行設置

  到這裏咱們的改造就基本完成了。

  4、總結

  前面提到了,本文不是ueditor的教程,可能大神會有更簡潔的方式。看起來也就這麼點代碼量,涉及的東西也很少,但當時確實花了我很多的時間。對我而言可能更多的收穫仍是解決和定位問題的能力的鍛鍊。其實對於咱們程序員來講修bug的能力是至關重要的,不只僅是本身寫出來的,也許是第三方插件的,也許正常狀況下不是問題,可是用到咱們具體的場景下某些條件就成了限制。最難修的永遠是別人的bug,遇到這種狀況,最重要的不盲目和自信,繞過去的問題永遠是你的問題,勇於去迎接挑戰才能提高本身。

相關文章
相關標籤/搜索