87,997
社区成员
发帖
与我相关
我的任务
分享ckeditor编辑器为何高设置100%无效?但宽却有效，很神奇！
ckeditor版本为3.6.5,chrome,IE8及以上测试都无效。
刚研究这个编辑器还不熟，不知怎么改。
我目前是集成在ext4中，由于高不能自适应100%高度，造成没填充满容器，难看，如下图：
但奇怪的是，宽居然可以自适应！即100%有效。
config.js配置如下：
config.width = '100%'; // 宽度,这里100%有效，即宽度可以适应
config.height = '100%'; // 上句有效，此句居然无效，你说神奇不神奇?
测试代码：
大家测试时，也不一定非要在ext4下，没这环境的，可以删掉，用:
<textarea id="content" name="content" style="height: 600px;"></textarea>
<script type="text/javascript">
CKEDITOR.replace("content");
</script>
高度也是没办法自适应。
这个问题比较头疼啊，我之前用fckeditor时，用chrome,ff高度都可以自适应的，只是ie8，以上不兼容，现在换成ckeditor了，居然，都不行了，学艺不精啊，还是向各位大侠求助解决了。
我觉得，这个问题，应该是普遍存在的，希望大家一起想办法解决这个麻烦问题，先谢了
刚研究这个编辑器还不熟，不知怎么改。
我目前是集成在ext4中，由于高不能自适应100%高度，造成没填充满容器，难看，如下图：
但奇怪的是，宽居然可以自适应！即100%有效。
config.js配置如下：
CKEDITOR.editorConfig = function( config )
{
config.uiColor = '#ddeeff';
config.language = 'zh-cn';
config.width = '100%'; // 宽度,这里100%有效，即宽度可以适应
config.height = '100%'; // 高度，这里100%无效，会变成默认最小的高，怎么解决?
config.skin = 'kama';// 界面皮肤
config.toolbar = 'Full';// 工具栏风格
config.toolbarCanCollapse = true;// 工具栏是否可以被收缩
config.resize_enabled = true;// 拖拽以改变尺寸
}
config.width = '100%'; // 宽度,这里100%有效，即宽度可以适应
config.height = '100%'; // 上句有效，此句居然无效，你说神奇不神奇?
测试代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/ext4.1.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext4.1.1/ext-all.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
Ext.onReady( function (){
Ext.WindowManager.setBase(9999);
var win = Ext.create("Ext.window.Window",{
title: "测试窗体",
layout: "fit",
border: false,
width: 700,
height: 600,
plain: true,
maximizable: true,
items:[
{
xtype: "textarea",
name: "content"
}
],
listeners:{
show: function(component, options){
CKEDITOR.replace('content');
}
}
});
win.show();
});
</script>
</head>
<body>
</body>
</html>
大家测试时，也不一定非要在ext4下，没这环境的，可以删掉，用:
<textarea id="content" name="content" style="height: 600px;"></textarea>
<script type="text/javascript">
CKEDITOR.replace("content");
</script>
高度也是没办法自适应。
这个问题比较头疼啊，我之前用fckeditor时，用chrome,ff高度都可以自适应的，只是ie8，以上不兼容，现在换成ckeditor了，居然，都不行了，学艺不精啊，还是向各位大侠求助解决了。
我觉得，这个问题，应该是普遍存在的，希望大家一起想办法解决这个麻烦问题，先谢了
...全文
请发表友善的回复…
发表回复
斯洛文尼亚旅游 2012-11-22
- 打赏
- 举报
你可以用一个全局变量来保存ckeditor实例名称。在instanceReady事件中获取到，要不你就要遍历CKEDITOR.instances对象来获取了
show: function(component, options){
CKEDITOR.replace('content');
CKEDITOR.on('instanceReady', function (e) {
var id=e.editor.name;//////////这个就是
var td = document.getElementById('cke_contents_' + e.editor.name);
var tbody = td.parentNode.parentNode;
td.style.height = 469 - tbody.rows[0].offsetHeight - tbody.rows[2].offsetHeight + 'px';
//alert(e.editor.name+'加载完毕！')
});
},斯洛文尼亚旅游 2012-11-21
- 打赏
- 举报
设置100%没用，需要具体的数值。
填充容器需要计算出工具栏和状态栏的高度，用容器高度减去后给编辑区设置高度就行，ｃｋｅｄｉｔｏｒ的全屏功能就是这样实现的。
你可以参考这个，刚研究完的，太多就不发了。ckeditor自动填满容器
网络科技 2012-11-21
- 打赏
- 举报
自己用间接的方法解决了：
var aa = CKEDITOR.instances;
var id;
for(var a in aa){
//alert(a+"=="+aa[a]);
id = a;
}
var td = document.getElementById('cke_contents_' + id);
好了，本贴终于告一段落。。。再次感谢showbo大侠的热心协助，也给后来者一些参考吧
网络科技 2012-11-21
- 打赏
- 举报
showbo大侠，那个修改成直接100%高有效，估计确实有点难度，我也稍看了下那个fckeditor的源码，也没看出什么名堂来，想想还是算了，你如果看到，也别浪费时间了，呵，除非你真有时间去挑战下。
就用你介绍的这个间接来方法解决吧，但用你这个方法，我最大化时，貌似不好求到td对象，你这个再帮忙看下怎么弄啊
show: function(component, options){
CKEDITOR.replace('content');
CKEDITOR.on('instanceReady', function (e) {
var td = document.getElementById('cke_contents_' + e.editor.name);
var tbody = td.parentNode.parentNode;
td.style.height = 469 - tbody.rows[0].offsetHeight - tbody.rows[2].offsetHeight + 'px';
//alert(e.editor.name+'加载完毕！')
});
},
maximize: function(window, eOpts){//最大化时，改变编辑框大小
var td = document.getElementById('cke_contents_' + e.editor.name);//这时候，已经加载完了，没有这个e对象，所以e.editor.name得不到值，也就是说td对象弄不到了，怎么处理呢?还有，e.editor.name不能直接用“content”代替，因为，不一定指定的是id
var tbody = td.parentNode.parentNode;
td.style.height = 560 - tbody.rows[0].offsetHeight - tbody.rows[2].offsetHeight + 'px'; ;
//alert(e.editor.name+'加载完毕！')
}
网络科技 2012-11-21
- 打赏
- 举报
ckeditor.js代码格式化后，太多了，有两万多行，我查找了下，把其中有关于高度部分的代码贴上来，看下，是不是在里边，可以作兼容性的修改。
getViewPaneSize : function() {
var g = this.$.document, h = g.compatMode == 'CSS1Compat';
return {
width : (h ? g.documentElement.clientWidth : g.body.clientWidth)
|| 0,
height : (h
? g.documentElement.clientHeight
: g.body.clientHeight)
|| 0
};
}
var i = {
width : ['border-left-width', 'border-right-width', 'padding-left',
'padding-right'],
height : ['border-top-width', 'border-bottom-width', 'padding-top',
'padding-bottom']
};
a.config = {
customConfig : 'config.js',
autoUpdateElement : true,
baseHref : '',
contentsCss : a.basePath + 'contents.css',
contentsLangDirection : 'ui',
contentsLanguage : '',
language : '',
defaultLanguage : 'en',
enterMode : 1,
forceEnterMode : false,
shiftEnterMode : 2,
corePlugins : '',
docType : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
bodyId : '',
bodyClass : '',
fullPage : false,
height : 200,
plugins : 'about,a11yhelp,basicstyles,bidi,blockquote,button,clipboard,colorbutton,colordialog,contextmenu,dialogadvtab,div,elementspath,enterkey,entities,filebrowser,find,flash,font,format,forms,horizontalrule,htmldataprocessor,iframe,image,indent,justify,keystrokes,link,list,liststyle,maximize,newpage,pagebreak,pastefromword,pastetext,popup,preview,print,removeformat,resize,save,scayt,showblocks,showborders,smiley,sourcearea,specialchar,stylescombo,tab,table,tabletools,templates,toolbar,undo,wsc,wysiwygarea',
extraPlugins : '',
removePlugins : '',
protectedSource : [],
tabIndex : 0,
theme : 'default',
skin : 'kama',
width : '',
baseFloatZIndex : 10000
};
(function() {
if (b.webkit) {
b.hc = false;
return;
}
var l = h
.createFromHtml(
'<div style="width:0px;height:0px;position:absolute;left:-10000px;border: 1px solid;border-color: red blue;"></div>',
a.document);
l.appendTo(a.document.getHead());
try {
b.hc = l.getComputedStyle('border-top-color') == l
.getComputedStyle('border-right-color');
} catch (m) {
b.hc = false;
}
if (b.hc)
b.cssClass += ' cke_hc';
l.remove();
})();
(function() {
a.dialog ? m() : a.on('dialogPluginReady', m);
function m() {
a.dialog.on('resize', function(n) {
var o = n.data, p = o.width, q = o.height, r = o.dialog, s = r.parts.contents;
if (o.skin != 'kama')
return;
s.setStyles({
width : p + 'px',
height : q + 'px'
});
});
};
})();
F.setStyles({
position : 'absolute',
top : D.getStartElement().getDocumentPosition().y
+ 'px',
width : '1px',
height : '1px',
overflow : 'hidden'
});
F.setStyle(this.config.contentsLangDirection == 'ltr'
? 'left'
: 'right', '-1000px');
m.on('mousedown', function(s) {
s = s.data;
if (s.$.button != 2) {
if (s.getKeystroke() == 1114112 + 1)
m.fire('contextmenu', s);
return;
}
if (n && (b.mac ? s.$.metaKey : s.$.ctrlKey))
return;
var t = s.getTarget();
if (!o) {
var u = t.getDocument();
o = u.createElement('input');
o.$.type = 'button';
u.getBody().append(o);
}
o
.setAttribute(
'style',
'position:absolute;top:'
+ (s.$.clientY - 2)
+ 'px;left:'
+ (s.$.clientX - 2)
+ 'px;width:5px;height:5px;opacity:0.01');
});
p.addCss('img.cke_flash{background-image: url('
+ a.getUrl(this.path + 'images/placeholder.png') + ');'
+ 'background-position: center center;'
+ 'background-repeat: no-repeat;'
+ 'border: 1px solid #a9a9a9;' + 'width: 80px;'
+ 'height: 80px;' + '}');
init : function(m) {
var n = m.lang;
m.addCss('form{border: 1px dotted #FF0000;padding: 2px;}\n');
m.addCss('img.cke_hidden{background-image: url('
+ a.getUrl(this.path + 'images/hiddenfield.gif') + ');'
+ 'background-position: center center;'
+ 'background-repeat: no-repeat;'
+ 'border: 1px solid #a9a9a9;' + 'width: 16px !important;'
+ 'height: 16px !important;' + '}');
embed : function(U) {
var V = U.parent;
if (V && V.name == 'object') {
var W = V.attributes.width, X = V.attributes.height;
W && (U.attributes.width = W);
X && (U.attributes.height = X);
}
},
init : function(s) {
var t = s.lang, u = a.document, v = u.getWindow(), w, x, y, z;
function A() {
var C = v.getViewPaneSize();
z && z.setStyles({
width : C.width + 'px',
height : C.height + 'px'
});
s.resize(C.width, C.height, null, true);
};
if (typeof o == 'string' && o.length > 1
&& o.substr(o.length - 1, 1) == '%')
o = parseInt(window.screen.height * parseInt(o, 10) / 100, 10);
var q = parseInt((window.screen.height - o) / 2, 10), r = parseInt(
(window.screen.width - n) / 2, 10);
p = (p || 'location=no,menubar=no,toolbar=no,dependent=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes')
+ ',width='
+ n
+ ',height='
+ o
+ ',top='
+ q
+ ',left='
+ r;
var B = window
.open(
A,
null,
'toolbar=yes,location=no,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width='
+ w + ',height=' + x + ',left=' + y);
var w = e.addFunction(function(x) {
if (!p)
p = m.getResizable();
r = {
width : p.$.offsetWidth || 0,
height : p.$.offsetHeight || 0
};
q = {
x : x.screenX,
y : x.screenY
};
n.resize_minWidth > r.width
&& (n.resize_minWidth = r.width);
n.resize_minHeight > r.height
&& (n.resize_minHeight = r.height);
a.document.on('mousemove', u);
a.document.on('mouseup', v);
if (m.document) {
m.document.on('mousemove', u);
m.document.on('mouseup', v);
}
});
var t = {
width : b.ie7Compat ? '99%' : '100%',
height : '100%',
resize : 'none',
outline : 'none',
'text-align' : 'left'
};
if (c) {
q = function() {
p.hide();
p.setStyle('height', r.$.clientHeight
+ 'px');
p.setStyle('width', r.$.clientWidth
+ 'px');
p.show();
};
N = h
.createFromHtml('<iframe style="width:100%;height:100%" frameBorder="0" aria-describedby="'
+ Z
+ '"'
+ ' title="'
+ G
+ '"'
+ ' src="'
+ Y
+ '"'
+ ' tabIndex="'
+ (b.webkit ? -1 : E.tabIndex)
+ '"'
+ ' allowTransparency="true"'
+ '></iframe>');
if (T._.contentSize && T._.contentSize.width == R
&& T._.contentSize.height == S)
return;
a.dialog.fire('resize', {
dialog : T,
skin : T._.editor.skinName,
width : R,
height : S
}, T._.editor);
T.fire('resize', {
skin : T._.editor.skinName,
width : R,
height : S
}, T._.editor);
getSize : function() {
var R = this._.element.getFirst();
return {
width : R.$.offsetWidth || 0,
height : R.$.offsetHeight || 0
};
},
this.resize(this._.contentSize && this._.contentSize.width
|| S.width || S.minWidth, this._.contentSize
&& this._.contentSize.height || S.height
|| S.minHeight);
var S = [], T = R.label ? ' title="' + e.htmlEncode(R.label)
+ '"' : '', U = R.elements, V = a.dialog._.uiElementBuilders.vbox
.build(ad, {
type : 'vbox',
className : 'cke_dialog_page_contents',
children : R.elements,
expand : !!R.expand,
padding : R.padding,
style : R.style
|| 'width: 100%;height:100%'
}, S), W = h.createFromHtml(S.join(''));
if (ag) {
aa = h
.createFromHtml('<div class="cke_dialog_resize_cover" style="height: 100%; position: absolute; width: 100%;"></div>');
af.append(aa);
if (X)
ac.push('width:' + m(X || '100%'));
if (Y)
ac.push('height:' + m(Y[ab]));
else if (V && V.expand)
ac.push('height:' + Math.floor(100 / T.length)
+ '%');
网络科技 2012-11-21
- 打赏
- 举报
由于我是集成到ext4中，如果要说冲突，只能怀疑是ext4的样式造成的，但是，我把ext4去掉，在纯js，html下测试,100%高依然不能自适应，所以，只能怀疑ckeditor不兼容或bug吧，本人改bug的能力有限，只能像高人求助了。
我觉得应该得修改ckeditor.js中的源码吧，但简单看了下，头疼啊，不知道怎么入手，我看下，能不能把这个代码贴上来，好让各位发挥。
ILOVE_ASPNET 2012-11-21
- 打赏
- 举报
config.height = '100%'; // 高度，这里100%无效，会变成默认最小的高，怎么解决?
宽度100%可以， 高度100%？ 不可以么， 看看是不是你其它地方样式有冲突，比如限制了高度 导致了他的这个高度没办法显示出效果
网络科技 2012-11-21
- 打赏
- 举报
首先非常感谢，你的文章写得很好，通俗易懂，表示辛苦啦。
我认真的看了下，基本上明白你的解决方案了，但我觉得貌似不是很完美解决，还有不少遗留问题，看下图上说明：
大侠都研究到里层去了，可以参考一下，它的宽为何能自适应，还有，ckeditor的前期版本fckeditor，高可是能适应的啊（我就是直接设置100%，其它都没弄，只是前期的版本不支持ie8以上版本，我才放弃了），实在有点想不通呢，版本更高了，居然反而变得不行的了，呵
大侠晚上有时间，可以研究下fckeditor的解决方案，我前几天上传了一个fckeditor的测试版，没有的话，可以去下载。fck不兼容ie8,ie9,ie10,如何解决?
如果最后实在无法做到完美解决这个高自适应容器变化的问题，也只能将就先用下了。。。。
