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

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

　　1、問題

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

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

　　2、解決思路

　　解決方法有兩個：

　　一、移動端直接放棄適配方案，不過這樣仍是要對圖片進行一下處理，設置個width：100%不然屏幕就被撐開了。

　　二、在ueditor編輯的時候，根據與app相同的策略來使用rem來代替其固有的px，同時頁面根元素設置與app使用的font-size

　　對比而言，確定第一種比較快，但仍是繞過去了問題，第二個就要閱讀源碼了，仍是讓咱們一塊兒來看一下如何進行第二種方案。　　

　　詳細來講，第二種方案要求有下面這麼兩個：

　　一、pc上html設置font-size與app保持一致(咱們以50px爲例)，確保dpr爲1狀況下相同元素在pc和app兩端是相同的的。例如14px，在app屏幕dpr爲1(即非高清屏)的狀況下爲0.28rem，一樣在pc上也應該爲0.28rem。也就是將ueditor中的字體選項10-28px的選項對應*0.02。

　　二、考慮咱們的用戶並不知道rem，因此展現仍是要是14px這樣的形式　　　

　　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，遇到這種狀況，最重要的不盲目和自信，繞過去的問題永遠是你的問題，勇於去迎接挑戰才能提高本身。