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 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
vue组件实现进度条效果
Jun 06 Javascript
vue的for循环使用方法
Feb 12 Javascript
js编写简易的计算器
Jul 29 Javascript
解决await在forEach中不起作用的问题
Feb 25 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
详解Python3中yield生成器的用法
2015/08/20 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
python 实现return返回多个值
2019/11/19 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
如何写你的创业计划书
2014/01/07 职场文书
社区工作感言
2014/02/21 职场文书
计算机系本科生求职信
2014/05/31 职场文书
远程培训的心得体会
2014/09/01 职场文书
医德考评自我评价
2014/09/14 职场文书
教你用python实现12306余票查询
2021/06/30 Python