代码改变世界

UMeditor宽度自适应

2014-10-21 16:32  于为源  阅读(7376)  评论(2编辑  收藏  举报

百度编辑器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%");

就可以了。