UEditor手动调节其宽度
其高度一般不考虑,给个初始高度,然后任其自动扩展就行,对于其宽度,有两种思路,一种是调节其所在的DIV的宽度,让其自动填充,另一种是直接调节编辑器的宽度:
adjust_editor_size: function () {
//注:由于编辑器的宽度官方并没有给出有效的调节方法,这里我们用调节其所属DIV的宽度的方式来调其宽度(让编辑器自动跟随其父变化而变化),所以,此方法应先于编辑器的生成而调用。
return;
var editor_parent = $('.editor_parent');
var explain_w = editor_parent.prev().width();
var area_w = $('.center').width();
var editor_parent_w = area_w - explain_w - 100;
editor_parent.width(editor_parent_w);
}
但上边的方法有个缺点,那就是当窗口大小变化时就不顶用了,于是,我们可以在浏览器中看到,我们的编辑器有一个固定的样式类叫 edui-editor ,于是,我们可以用这个类来调节,走起:
editor_resize: function () {
var editor_parent = $('.editor_parent');
var explain_w = editor_parent.prev().width();
var area_w = $('.center').width();
var editor_parent_w = area_w - explain_w - 100;
var editor = $('.edui-editor');
//editor.width(editor_parent_w);
editor.animate({ width: editor_parent_w + "px" });
}
搞定的同时,我们还发现,只要调一下 edui-editor 的高度,其直系子DIV的宽度都会自动跟着动,还好,剩心不少啊!
$(window).resize(function () {
page.fn.editor_resize();
});
page.fi.iEditor = page.fk.kEditor = UE.getEditor('editor_container', {
toolbars: [[
'source', '|', 'undo', 'redo', '|'
, 'fontfamily', 'fontsize', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', '|'
, 'superscript', 'removeformat', 'formatmatch', '|',
'forecolor', 'backcolor', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
'touppercase', 'tolowercase', '|',
'link', 'unlink', '|',
'emotion', 'scrawl', 'simpleupload', 'imagenone', 'imageleft', 'imageright', 'imagecenter'
]]
});
page.fi.iEditor.ready(function () {
page.fn.editor_resize();
});
UEditor手动调节其宽度的更多相关文章
- laravel excel导出调节列宽度,对某列中数据颜色处理
//$cellData 表格标题栏各名称数组 //$result 表格内容数组//$items getForDataTable得到的表格数据 $result = array_merge($cellDa ...
- manjaro 手动调节屏幕亮度
1 问题描述 manjaro版本20.0,桌面XFCE,设置之类的地方没有屏幕亮度调节的功能. 2 解决方案 解决方案来自arch wiki. 亮度由ACPI内核模块控制,这个模块的接口在以下位置: ...
- UEditor自动调节宽度
UEditor自动调节宽度 一.总结 一句话总结:ueditor是网页的产物,没有API我们照样可以像调网页元素那样调,一样的,这里是改变插件的css样式实现 启示: 百度 文档 引擎 ueditor ...
- DevExpress 控件中GridControl的使用
近期开发用到了DevExpress系列的控件,GridControl是我用到的Dev系列控件最多的一个控件.现在先来总结一下: 首先先写一个简单的小例子来简单介绍一下GridControl的用法: 1 ...
- css判断不同分辨率显示不同宽度布局实现自适应宽度
一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...
- CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...
- Android 调节当前Activity的屏幕亮度
调节的关键代码: WindowManager.LayoutParams layoutParams = getWindow().getAttributes(); layoutParams.screenB ...
- ASP.NET MVC4 UEditor 的上传图片配置路径
ASP.NET MV4下,使用UEditor1.4.3最新版本,网址就不说了,去百度官网下载即可,关于在Controler下如何配置,直接上图: 然后再Views下面来个页面引用如下: < ...
- [IMX6DL] CPU频率调节模式以及降频方法
本文转自http://blog.csdn.net/kris_fei/article/details/51822435 Kernel branch: 3.0.35 CPU的频率调节模式:1. Perfo ...
随机推荐
- mySQL函数根据经纬度计算两点距离
DROP FUNCTION IF EXISTS func_calcDistance ; CREATE FUNCTION func_calcDistance( origLng ,), -- 目的地经度 ...
- delphi强制WebBrowser控件使用指定版本显示网页
function TFrmmain.WriteAppNameToReg:Boolean; var reg:TRegistry; sPath,sAppName:String; Sver:string; ...
- JS跨域
//2011-7-25 (function(){ //闭包 function load_script(xyUrl, callback){ var head = document.getElements ...
- Docker 学习笔记(CentOS 7.1)
基本概念 Docker 包括三个基本概念 镜像(Image) 容器(Container) 仓库(Repository)理解了这三个概念,就理解了 Docker 的整个生命周期. Docker 镜像 D ...
- ABAP SPLIT
注意: 假定'\'为分隔符 * '1'会分成1部分,值为1 * 分隔符之前的即使是空白或没有,也算一部分. 最后一个分隔符之后的,若有值会算一部分.若没有值,则不会算 比如'\1\'会分成2部分 '\ ...
- java(2)之前往对象村
这次说一说面向对象与面向过程的区别以及面向对象的优点.
- 第十一章 GUI 上
第11章 GUI程序设计 11.1 JFC简介 JFC(Java Foundation Class) 作为CUI(Graphic User Interface)设计的基础.JFC包含AWT(Abst ...
- dll的导入库(lib)输出路径
创建动态链接库项目A, 它会生成:dll, lib, exp 等,其中 lib & exp 生成的路径设置在:[Linker]->[All Options]->[Import Li ...
- validate插件深入学习-01 小白从看透一个插件开始
没有编程基础的的我,即使看了一遍jq文档也不知道怎么写程序,一个新的插件看了也不知道怎么用. 总是想做自己会的,自己不会的永远不去触碰,就永远不会. 都说编程这东西,很多都有很像的地方了,一个语言学通 ...
- 关于win10连接不上ftp的解决方案
win10系统连接ftp服务器的时候,会先出现假死,比如: 然后 就会报错: 面对这些问题:我们不需要关闭放火请,卸载杀毒软件等等无用的操作,只需要一步就能搞定: 把ftp:// 换成 file:\\ ...