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

因為高清屏下面，進行了viewport的縮放，所以固定的px就不適用了。

解決方法有兩個：

對比而言，肯定第一種比較快，但還是繞過去了問題，第二個就要閱讀原始碼了，還是讓我們一起來看一下如何進行第二種方案。　　

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

2、考慮我們的使用者並不知道rem，所以展示還是要是14px這樣的形式　　　

根據上面的要求，要想修改ueditor的原始碼，首先得捋一下相關**具體在哪，對於ueditor.all.js那幾千行的**來說，如果一點點看下去，顯然有點不可取。我們應該搜尋關鍵字。我們先看一下ueditor字型大小相關的部分長什麼樣子：

可以看到這部分的特殊的class是edui-for-fontsize,只有乙個，**如下

到這裡大家應該就可以看出來設定字型和顯示的地方了，具體看**

1
//@todo 修改為rem2//
var size = list[i] + 'px';
3var size = (list[i]*2/100 )+ 'rem';
4items.push(
15             });

到這裡起碼看起來像那麼回事了，展示的是px其實是rem。但是還有乙個問題，每次切換字型大小之後都會變為0rem。

這個就太神奇了，明明沒有零的存在呀。肯定是ueditor做了計算然後得出的。下面就是打斷點尋找了。這個過程就不贅述了。發現了下面這段**：

//
當修改字型的時候回去進行計算，因為px肯定是整數，所以會進行下面的做法
//但是我們轉成rem之後就是0.n，這樣就有問題了
var styleval =domutils.getcomputedstyle(startnode, style),
tmp = /^([\d\.]+)(\w+)$/.exec( styleval );
if( tmp )     
//計算出來之後，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，遇到這種情況，最重要的不盲目和自信，繞過去的問題永遠是你的問題，敢於去迎接挑戰才能提公升自己。

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

百度UEditor 介紹

百度外掛程式ueditor

百度UEditor基本使用

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

百度UEditor 介紹

百度外掛程式ueditor

百度UEditor基本使用

相關推薦