UMeditor寬度自適應

於為源發表於2014-10-21

百度編輯器UMeditor，生成富文字編輯框以後，改變視窗大小會出現橫向滾動條，即使你呼叫介面設定了編輯器的寬度為100%。如：

var um = UM.getEditor('<%=txtContent.ClientID%>');
            um.setWidth("100%");

這是由於UMeditor內部生成了一個css類為“edui-body-container”的DIV來呈現使用者輸入區域，而這個div的寬度是獲取的目標元素的寬度絕對值。這也就解釋瞭如果目標元素的寬度比較小，我們即使設定了UMeditor的寬度為100%，可編輯區域也會比較小的現象。

那麼，問題來了，中國挖掘機哪家強呢？：）

我們可以有兩種方式來解決：

第一、修改原始碼，找到生成edui-body-container的位置，將其修改掉；

第二、直接在初始化UMeditor以後設定edui-body-container寬度即可。

我是懶人，修改原始碼還需要找到具體位置，修改完還要測試啥的，如果是壓縮過的mini包修改起來就更麻煩了。所以，我選取的是後一種方式，只需要加上一句話：

            var um = UM.getEditor('<%=txtContent.ClientID%>');
            um.setWidth("100%");
            $(".edui-body-container").css("width", "98%");

由於是類選擇器，如果一個頁面中有多個UMeditor，則初始化完所有的編輯器後寫一遍

$(".edui-body-container").css("width", "98%");

就可以了。

相關文章