CKEditor 3.0高度

Question

有没有办法将CKEditor 3.0的高度设置为百分比,例如100%,这样就占用了整个窗口？

我目前正在使用绝对值,但它们与我的UI不能很好地融合:(

CKEDITOR.replace('editor1',{
    height: '600px'
});

Answer 1

首先添加一个调整edtior大小的函数:

function resizeEditor() {

  var defaultHeight = 300;
  var newHeight = window.innerHeight-150; 
  var height = defaultHeight > newHeight ? defaultHeight: newHeight;

  CKEDITOR.instances.editor1.resize('100%',height);
}

注意:150对我有效,可能会将值从150更改为更多或更少.

从窗口onresize事件调用此事件:

window.onresize = function() {
  resizeEditor();
}

并将第一个调用添加到编辑器的构造函数中:

CKEDITOR.replace('editor1',
  {  
    on:
    {
      instanceReady: function(ev)
      {
        setTimeout(resizeEditor, 500);
      }
    }
  });

Answer 2

在ckeditor 4上大量摆弄这个调整大小的东西后,我编写了这个对我来说完美无缺的工作:

在config.js中:

// prevent flashing of resizing by setting the content panel to zero height before it is resized
config.height = '0px';
config.width = '100%'; 

jQuery的:

$(document).ready(function(){

    // resize the editor(s) while the instance is ready
    CKEDITOR.on('instanceReady', function() { 
        var textEditHeight      = $(".textPanel").height();
        var ckTopHeight         = $("#cke_1_top").height();
        var ckContentsHeight    = $("#cke_1_contents").height();

        for (var i = 1; i < 10; i++) {
            $("#cke_"+i+"_contents").height( (textEditHeight - ckTopHeight - 10) + "px");

        }
    });

    // resize the editor(s) while resizing the browser
    $(window).resize(function(){
        var textEditHeight      = $(".textPanel").height();
        var ckTopHeight         = $("#cke_1_top").height();
        var ckContentsHeight    = $("#cke_1_contents").height();

        for (var i = 1; i < 10; i++) {
            $("#cke_"+i+"_contents").height( (textEditHeight - ckTopHeight - 10) + "px");
        }
    });

});

我在选项卡中有多个完全相同大小的编辑器实例,对于每种语言都是如此,因此for循环.如果您有一个编辑器,则可以将该行留下并使用标准ID cke_1_contents.

在此示例中,高度取自第一个编辑器工具栏(cke_1_top)和contentpanel(cke_1_contents)..textPanel高度是编辑器应该适应的周围div.我添加了10px,因为我需要为我的布局.

我认为它可以更有效率(它启动调整大小的次数与编辑器一样多)但是现在它终于在我最近的所有浏览器(ff,即chrome和safari)中完美运行.

Answer 3

我设法通过CSS配置100%的高度:

1. config.height = '100%'即使文档说不支持,也要配置编辑器.
2. 把它放在你的CSS中:

span.cke_wrapper cke_ltr,table.cke_editor, td.cke_contents, span.cke_skin_kama, span.cke_wrapper, span.cke_browser_webkit{
    height: 100%!important;
}

我用Chrome,Firefox和Safari对它进行了测试,效果很好.由于这是纯CSS,因此在调整窗口或相应容器的大小时,将自动调整高度.