UMeditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,是UEditor的简化版,UM的主要特点就是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率。最近在使用的过程中发现其中上传的图片无法正常缩放,选中图片,用鼠标点击并拖动图片边沿的小标签,图片只能缩小不能放大。尝试过很多方法都没办法解决,甚至检查了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;
}

我们只需要在当前页面重新定义样式:

.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为引用UMeditor组件的父元素上的class。

Bootstrap 3的box-sizing样式导致UMeditor控件的图片无法正常缩放的更多相关文章

  1. Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放

    UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图 ...

  2. Flutter样式和布局控件简析(二)

    开始 继续接着分析Flutter相关的样式和布局控件,但是这次内容难度感觉比较高,怕有分析不到位的地方,所以这次仅仅当做一个参考,大家最好可以自己阅读一下代码,应该会有更深的体会. Sliver布局 ...

  3. WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 菜单M ...

  4. WPF自定义控件与样式(10)-进度控件ProcessBar自定义样

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Pro ...

  5. WPF-实现Windows 7 样式 Aero TreeView 控件

    关于实现Windows 7 样式 Aero TreeView 控件的具体过程可以参考如下文章 http://www.cnblogs.com/o2ds/archive/2010/06/22/176302 ...

  6. 【转】WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: 菜单Menu的自定义样式: 右键菜单ContextMenu的自定义样式 ...

  7. duilib 修复padding属性导致其他控件自动计算宽高度错误的bug和导致自己宽高度错误的bug

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42950733          BUG 一:padding导致其他控件宽 ...

  8. C语言Windows程序开发—Windows窗口样式与常用控件样式【第04天】

    (一)Windows窗口(MDICLIENT)样式介绍 /* Windows窗口样式 */ WS_BORDER //带有边框的窗口 WS_CAPTION //带有标题栏的窗口 WS_CHILD //子 ...

  9. Ext.net Calendar 控件在有模板页的时候,模板页定义了TD的样式造成日历控件的样式丢掉

    Ext.net Calendar 控件在有模板页的时候,模板页定义了TD的样式造成日历控件的样式丢掉 解决方案 在本页面添加下面的样式 <style type="text/css&qu ...

随机推荐

  1. faster rcnn源码阅读笔记2

  2. java实现两个不同list对象合并后并排序

    工作上遇到一个要求两个不同list对象合并后并排序1.问题描述从数据库中查询两张表的当天数据,并对这两张表的数据,进行合并,然后根据时间排序.2.思路从数据库中查询到的数据放到各自list中,先遍历两 ...

  3. 大数据入门到精通10--spark rdd groupbykey的使用

    //groupbykey 一.准备数据val flights=sc.textFile("data/Flights/flights.csv")val sampleFlights=sc ...

  4. 小强学渲染之OpenGL状态机理解

    状态机是理论上的一种机器,呃这个说法非常非常的抽象.通俗一点理解,状态机描述了一个对象在其生命周期内所经历的各种状态,状态间的转变,发生转变的动因,条件及转变中所执行的活动.或者说,状态机是一种行为, ...

  5. 【你的职业规划】web前端的职业发展方向及学习攻略【转载】

    web前端的职业发展方向有哪些?本文献给正在迷茫中,准备入坑web前端的初学者以及知海匠库web前端培训班的准前端工程师们:   一.职业方向定位 首先,只有确定好自己的职业方向,才能做好职业规划.在 ...

  6. 图片识别文字, OCR

    文章引用自: https://www.cnblogs.com/stone_w/archive/2011/10/08/2202397.html 方式一.Asprise-OCR的使用. Asprise-O ...

  7. 64位Redhat系统应用(c++代码)搭建-使用informix和g++编译

    这篇博客很有必要写下来,记录我在一个比较原生的Linux系统上搭建一套应用所遇到的各种问题和各种坑. 关于这套应用,算是我离职前的一个项目,不完成的话没有办法交差,同时,这个项目也比较紧,合作行一直在 ...

  8. 大型互联网 b2b b2c o2o 电子商务微服务云平台

    鸿鹄云商大型企业分布式互联网电子商务平台,推出PC+微信+APP+云服务的云商平台系统,其中包括B2B.B2C.C2C.O2O.新零售.直播电商等子平台. 分布式.微服务.云架构电子商务平台 java ...

  9. Netsharp下载及环境搭建

    作者:秋时  日期:2014-02-22   转载请保留原文链接 更新日志 2014-02-22 版本4.0 第一次发布 2014-04-19 版本4.01 修复网友提的部分bug,添加Netshar ...

  10. 学习:java集合

    java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台(即JavaEE, JavaME, Jav ...