Решение проблемы нестандартного поведения изображения в UEditor из-за стиля box-sizing в Bootstrap 3

Компонент UEditor - это набор开源 web-редакторов所见即所得, предоставляемый Baidu, который имеет легковесность, возможность настройки и внимание к опыту пользователей, основан на соглашении MIT, и функционально очень силен. В последнее время в процессе использования было обнаружено, что загруженные изображения (или вставленные изображения из уже существующих наборов смайликов) не могут быть нормально масштабированы. Выбрав изображение, щелкнув мышью и потянув маленькую метку по краю изображения, изображение можно только уменьшить, но не увеличить. Пробовали множество методов, но не удалось решить проблему, даже проверив исходный код js, не было обнаружено никаких аномалий.

　　Позднее случайно обнаружилось, что на странице был добавлен Bootstrap, и по умолчанию Bootstrap устанавливает стиль box-sizing в значение border-box. Подробности можно найти в журнале发布的 Bootstrap:http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

　　Для определения и использования стиля box-sizing см. здесь:http://www.w3school.com.cn/cssref/pr_box-sizing.asp

　　Влияющие css в Bootstrap:

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

　　Нам нужно только переопределить css на странице, чтобы覆盖 указанные стили в Bootstrap, например:

.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 - это css класс, используемый для родительского элемента компонента UEditor.

Ниже приведено полное описание решения проблемы с масштабированием изображений в контроллере UEditor, вызываемой стилем box-sizing в Bootstrap 3. Надеюсь, это поможет вам. Если у вас есть какие-либо вопросы, пожалуйста, оставляйте комментарии, и я отвечу вам вовремя!