English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 3of the box-sizing style causes the image of UEditor control to not scale normally Solution

UEditor component is an open-source web online WYSIWYG rich text editor provided by Baidu, which has the characteristics of lightweight, customizable, and focusing on user experience, based on the MIT agreement, and has very powerful functions. In the recent use, I found that the uploaded images (or inserted existing emoji package images) cannot be scaled normally. When selecting the image, clicking and dragging the small label on the edge of the image with the mouse can only make the image smaller, not larger. I have tried many methods and cannot solve it, even checked the js source code, and did not find any abnormal places.

  Later, by accident, I found that Bootstrap was introduced on the page, and Bootstrap defaults to set box-The sizing style is set to border uniformly-box. You can see the specific content in the release log of Bootstrap:http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

  About box-The definition and usage of sizing style can be seen here:http://www.w3school.com.cn/cssref/pr_box-sizing.asp

  The css affected by Bootstrap:

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

  We just need to redefine css on the page to override the above styles in Bootstrap, such as:

.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-The css class used by the parent element of the UEditor component is container.

The above is what the editor introduced to everyone about Bootstrap 3of the box-The full description of the solution to the problem that the sizing style causes the images of the UEditor control to be unable to scale normally, I hope it will be helpful to everyone. If you have any questions, please leave me a message, and the editor will reply to everyone in time!

You May Also Like