The box-sizing style of Bootstrap 3 causes the image of the UEditor control to fail to scale properly,
The UEditor component is a set of open-source, WYSIWYG web text editors provided by Baidu. It is lightweight, customizable, and focuses on user experience. It is powerful Based on the MIT protocol. During recent usage, we found that the uploaded images (or inserted images in an existing table package) cannot be scaled normally. Select the image and click and drag the small tab on the image edge with the mouse, images can only be zoomed in or out. I tried many methods and couldn't solve it. I even checked the js source code and didn't find any exceptions.
Later, we accidentally discovered that Bootstrap was introduced on the page, and BootstrapBox-sizingUnified style settingsBorder-box. For more information, see the Bootstrap release log: http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
For the definition and usage of the box-sizing style, see here: http://www.w3school.com.cn/cssref/pr_box-sizing.asp
Influential css in Bootstrap:
*,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
We only need to redefine css on the page to overwrite the above style in Bootstrap, for example:
.edui-container *{ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .edui-container *:before, .edui-container *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
*. Edui-container is the css class used to reference the parent element of the UEditor component.