Umeditor width adaptive

Baidu editor umeditor. After a rich text editing box is generated, a horizontal scroll bar will appear when the window size is changed, even if you call the interface to set the editor width to 100%. For example:

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

This is because umeditor internally generates a CSS class "edui-body-container" Div to present the user input area, and the width of this div is the absolute value of the width of the obtained target element. This explains that if the width of the target element is small, even if the width of umeditor is set to 100%, the Editable area will be relatively small.

So the question is, which excavator is the best in China? :)

We can solve this problem in two ways:

1. Modify the source code, find the location where edui-body-iner is generated, and modify it;

Second, you can directly set the edui-body-container width after initializing umeditor.

I am a lazy, and I still need to find the specific location to modify the source code. After the modification, I need to test the content. If it is a compressed mini package, it will be more troublesome. Therefore, I chose the latter method. I only need to add one sentence:

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

Because it is a class selector, if there are multiple umeditors in a page, write it after initializing all the editors.

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

You can.

Umeditor width adaptive