UMeditor宽度自适应

百度编辑器UMeditor,生成富文本编辑框以后,改变窗口大小会出现横向滚动条,即使你调用接口设置了编辑器的宽度为100%。如:

var um = UM.getEditor(‘<%=txtContent.ClientID%>‘);
            um.setWidth("100%");

这是由于UMeditor内部生成了一个css类为“edui-body-container”的DIV来呈现用户输入区域,而这个div的宽度是获取的目标元素的宽度绝对值。这也就解释了如果目标元素的宽度比较小,我们即使设置了UMeditor的宽度为100%,可编辑区域也会比较小的现象。

那么,问题来了,中国挖掘机哪家强呢?:)

我们可以有两种方式来解决:

第一、修改源码,找到生成edui-body-container的位置,将其修改掉;

第二、直接在初始化UMeditor以后设置edui-body-container宽度即可。

我是懒人,修改源码还需要找到具体位置,修改完还要测试啥的,如果是压缩过的mini包修改起来就更麻烦了。所以,我选取的是后一种方式,只需要加上一句话:

            var um = UM.getEditor(‘<%=txtContent.ClientID%>‘);
            um.setWidth("100%");
            $(".edui-body-container").css("width", "98%");

由于是类选择器,如果一个页面中有多个UMeditor,则初始化完所有的编辑器后写一遍

$(".edui-body-container").css("width", "98%");

就可以了。

时间: 2024-11-25 20:34:39

UMeditor宽度自适应的相关文章

CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime;} #right { float: right; width: 200px; background: lime;} #center { margin:0 200px; background: blue} html: <div id="left">left</div>

抛砖引玉之宽度自适应布局

抛砖引玉之宽度自适应布局 什么是宽度自适应布局呢? 就是当浏览器窗口大小改变时,浏览器里的元素宽度也随之改变,从而达到自适应布局. 常见的宽度自适应布局有: 1.  两列:左边宽度不变,右边宽度自适应 2.  三列:左右两边宽度不变,中间部分自适应 3.  三列:左右两边宽度自适应,中间部分不变 一.利用div+css实现以上“自适应布局” (1)两列:左边宽度固定,右边宽度自适应 利用div+float+margin,已在随笔‘float剖析’中讲解,具体代码和效果图见下: <!DOCTYPE

记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用一行.像这样 当屏幕大于600px时,是这样 我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来... 下面是代码: <!DOCTYPE> <html> <head> <style> body{ margin: 0 ; padding: 0

左右两栏宽度自适应,中间一栏宽度固定

左右两栏宽度自适应,中间一栏宽度固定:中间一栏宽度固定,左右两栏宽度自适应效果在众多网页中都有应用,有不错的使用效果,下面就简单介绍一下如何此效果:代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <

手机网页宽度 , 图片宽度 自适应

网页宽度 页面box不要写宽度或 width:100% 之类的 去掉 头部加上下面代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 图片宽度 <script type="text/javascript"> f

二列div宽度自适应

二列div宽度自适应:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在之前的教程已经介绍了一列div宽度自适应.实现自适应效果的主要手段就是设置对象的width属性值为百分数.代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com

一列div宽度固定、一列div宽度自适应

一列固定.一列宽度自适应:建议:尽可能的手写代码,可以有效的提高学习效率和深度.之前的代码中,已经介绍过一列宽度自适应和二列宽度自适应,实现自适应的效果一般就是将相应对象的宽度以百分比的形式表示.在实际的布局中,一列宽度固定.一列宽度自适应.下面我们就以左侧div宽度固定,右侧div宽度是自适应为例.代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta n

图片超过DIV宽度自适应

.main_con img { max-width: 610px; height: auto; cursor: pointer; border: 0px double #cccccc; padding: 2px; zoom: expression( function(elm) { if (elm.width>610) { var oldVW = elm.width; elm.width=610; elm.height = elm.height*(610 /oldVW); } elm.style.

我熟知的三种三栏网页宽度自适应布局方法

一.前言在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择.当然,具体实现不是那么容易,需要一定的css功力和实践经验.本文不讲细节,只讲外部的自适应架构,这也是实现整个页面自适应的前提.目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法,margin负值法以及自身浮动法.这些方法简洁实用,且无兼容性问题.如果您想在您的页面上使用流动性布局,相信本文给您一些启示的. 二.三种方法为了演示的需要,首先限定下示例的布局结构:左中右三栏布