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. openwrt从18.0.1降级回到17.0.6遇到的问题

    因为觉得openwrt的18的配置检查功能很费时,特别是遇到ar93xx慢的真可以,所以决定从18.0.1降回到17.0.6上 先把18.0.1的配置backup出来,然后刷17.0.6,再把back ...

  2. mongodb mongod 启动参数

    我们可以通过mongod --help查看mongod的所有参数说明,以下是各参数的中文解释. 基本配置 –quiet# 安静输出 –port arg# 指定服务端口号,默认端口27017 –bind ...

  3. ubuntu安装gitlab-ci-runner、注册

    首先信任 GitLab 的 GPG 公钥: curl https://packages.gitlab.com/gpg.key 2> /dev/null | sudo apt-key add - ...

  4. TZOJ 3820 Revenge of Fibonacci(大数+trie)

    描述 The well-known Fibonacci sequence is defined as following: Here we regard n as the index of the F ...

  5. 机器学习(二)--------单变量线性回归(Linear Regression with One Variable)

    面积与房价 训练集 (Training Set) Size       Price 2104       460 852         178 ...... m代表训练集中实例的数量x代表输入变量 ...

  6. [转载] ul li css 做横向菜单

    原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...

  7. $.fn.extend() 问:我来这个世上到底是干嘛的?

    好好好 乖  本宝宝来告诉你  你来是干嘛的啊~ 话不多说 直接上码 当然如下代码是在jquery环境下运行的 HTML JS 完事~~~ 当你点击div元素的时候  你会发现弹出来“我被单击了”这句 ...

  8. 选择困难症的福音——团队Scrum冲刺阶段-Day 4

    选择困难症的福音--团队Scrum冲刺阶段-Day 4 今日进展 编写提问部分 做了不同问题所对应的游戏选项,但关于游戏分类的界面还没有做完 增加功能 昨天在主界面增加"关于我们" ...

  9. 使用虚拟机VM12安装REHL7

    转载https://blog.csdn.net/qq_19467623/article/details/52869108 转载http://www.07net01.com/2016/03/141198 ...

  10. vc++ openssl 程序签名

    RSA一般有两种应用场景:   1.公钥加密.私钥解密:这是数据安全通信领域最常见情形:   2.私钥加验.公钥验签:这主要用于数字签名. 我们这里用到的是第二种情况: 这里是基于OpenSSL,首先 ...