您现在的位置是:网站首页 > 代码编程 > WEB前端WEB前端

【原】UEditor和Bootstrap冲突导致图片缩放失败

不忘初心 不忘初心 2019-03-08 围观() 评论() 点赞() WEB前端

简介:UEditor是百度的一款开源工具,称之为:所见即所得的富文本编辑器,有图片、文字、视频、代码块等等功能集成,可以满足大部分网站的需求。之前一直用这个,并没有碰

UEditor是百度的一款开源工具,称之为:所见即所得的富文本编辑器,有图片、文字、视频、代码块等等功能集成,可以满足大部分网站的需求。

之前一直用这个,并没有碰到什么问题,但是最近的项目中,前端框架在选型的时候是bootstrap,然后再引入Ueditor的时候,就出现了一个问题:图片缩放不受控制,具体现象表现为,我想放大图片,将鼠标按住往右拖动,图片反而还向左缩小了,然后我鼠标继续向左的时候,图片变得更小了。

没有截到动态图,用一些标注来给大家看一下问题所在:

UEditor和Bootstrap冲突导致图片缩放失败

右下角红色框框是我拖动鼠标最终的位置,按理说此时图片应该也被放大到这个位置才对(红色方框区域),但是我的图片却变得非常小了,比我上传的原图片都小了不少。。。

真的是烦啊,因为不是第一次用这个插件,所以开始还以为是百度自己升级版本导致的bug,但是跑到官网去在线体验了一下demo,没有问题,图片可以正常缩放,但是为什么我这里不行了呢?

遂百度之,开始一直没有怀疑到bootstrap头上,后来查阅资料时,发现竟然是bootstrap的全局样式box-sizing属性影响到了图片缩放,因为将所有的元素都设置为了box-sizing:border-box了

这原因还真是让我意想不到,既然问题找到了,那就来解决它,bootstrap转成border-box了,那我给他转回来就OK了

.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;}

加上之后,问题得到解决,亲测可行!!!

ueditor富文本编辑器bootstrap

看完文章,有任何疑问,请加入群聊一起交流!!!

很赞哦! ()

文章评论

  • 请先说点什么
    人参与,条评论

请使用电脑浏览器访问本页面,使用手机浏览器访问本页面会导致下载文件异常!!!

雨落无影

关注上方公众号,回复关键字【下载】获取下载码

用完即删,每次下载需重新获取下载码

若出现下载不了的情况,请及时联系站长进行解决

站点信息

  • 网站程序:spring + freemarker
  • 主题模板:《今夕何夕》
  • 文章统计:篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们