Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案


Posted in Javascript onSeptember 15, 2016

UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于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

Bootstrap中有影响的css:

*,
*: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为引用UEditor组件的父元素上使用的css class。

以上所述是小编给大家介绍的Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案的全部叙述,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
Vue formData实现图片上传
Aug 20 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 #Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 #Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 #Javascript
Bootstrap精简教程中秋大放送
Sep 15 #Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 #Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 #Javascript
什么是JavaScript注入攻击?
Sep 14 #Javascript
You might like
PHP array 的加法操作代码
2010/07/24 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
vue实现购物车案例
2020/05/30 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
python实现超市商品销售管理系统
2019/11/22 Python
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
自我鉴定怎么写
2013/12/05 职场文书
入党自我鉴定
2014/03/25 职场文书
社区护士演讲稿
2014/08/27 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
社区服务活动报告
2015/02/05 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
Python函数对象与闭包函数
2022/04/13 Python