ckeditor编辑器为何高设置100%无效?但宽却有效，很神奇！

ckeditor版本为3.6.5,chrome,IE8及以上测试都无效。
刚研究这个编辑器还不熟，不知怎么改。
我目前是集成在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了，居然，都不行了，学艺不精啊，还是向各位大侠求助解决了。
我觉得，这个问题，应该是普遍存在的，希望大家一起想办法解决这个麻烦问题，先谢了

解决方案 »

  1.   

    config.height = '100%'; // 高度，这里100%无效，会变成默认最小的高，怎么解决?宽度100%可以， 高度100%？ 不可以么， 看看是不是你其它地方样式有冲突，比如限制了高度 导致了他的这个高度没办法显示出效果
      

  2.   

    由于我是集成到ext4中，如果要说冲突，只能怀疑是ext4的样式造成的，但是，我把ext4去掉，在纯js，html下测试,100%高依然不能自适应，所以，只能怀疑ckeditor不兼容或bug吧，本人改bug的能力有限，只能像高人求助了。
    我觉得应该得修改ckeditor.js中的源码吧，但简单看了下，头疼啊，不知道怎么入手，我看下，能不能把这个代码贴上来，好让各位发挥。
      

  3.   

    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)
    + '%');死马当活马医，应该是要改这里边的，太多太长了，还省略了不少，估计也没几个人能看得下去，呵
    也算是给自己再看下吧
    当然了，如果不是bug问题，那更麻烦了
      

  4.   

    设置100%没用，需要具体的数值。填充容器需要计算出工具栏和状态栏的高度，用容器高度减去后给编辑区设置高度就行，ｃｋｅｄｉｔｏｒ的全屏功能就是这样实现的。你可以参考这个，刚研究完的，太多就不发了。ckeditor自动填满容器
      

  5.   

    首先非常感谢，你的文章写得很好，通俗易懂，表示辛苦啦。
    我认真的看了下，基本上明白你的解决方案了，但我觉得貌似不是很完美解决，还有不少遗留问题，看下图上说明：大侠都研究到里层去了，可以参考一下，它的宽为何能自适应，还有，ckeditor的前期版本fckeditor，高可是能适应的啊（我就是直接设置100%，其它都没弄，只是前期的版本不支持ie8以上版本，我才放弃了），实在有点想不通呢，版本更高了，居然反而变得不行的了，呵
    大侠晚上有时间，可以研究下fckeditor的解决方案，我前几天上传了一个fckeditor的测试版，没有的话，可以去下载。fck不兼容ie8,ie9,ie10,如何解决?
    如果最后实在无法做到完美解决这个高自适应容器变化的问题，也只能将就先用下了。
      

  6.   

    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+'加载完毕！')
      
      }
      

  7.   

    自己用间接的方法解决了：
      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大侠的热心协助，也给后来者一些参考吧
      

  8.   

    你可以用一个全局变量来保存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+'加载完毕！')
                });                    
                   
          },