CKEditor 3.0高度 [英] CKEditor 3.0 Height

问题描述

有没有办法将CKEditor 3.0的高度设置为一个百分比，例如100％，以便占据整个窗口？

Is there a way to set the height of CKEditor 3.0 to a percentage, such as 100%, such that it takes up the whole window?

使用绝对值，但它们不与我的UI混合：（

I am currently using absolute values, but they do not blend well with my UI :(

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

推荐答案

在ckeditor 4上调整大小的东西后，我做了很多工作。我在这里完成了这项工作：

After a lot of fiddling with this resizing stuff on ckeditor 4 I made up this which works perfectly perfectly for me:

在config.js中：

in 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。

I have multiple instances of the editor of the exact same size in tabs, for every language one, hence the for loop. If you have one editor you can leave that line away and use the standard id cke_1_contents.

在这个例子中，高度取自第一个编辑器工具栏（cke_1_top）和contentpanel （cke_1_contents）。 .textPanel的高度是编辑器应该适合的周围的div。我添加了10px，因为我需要的布局。

In this example the heights are taken from the first editors toolbar (cke_1_top) and contentpanel (cke_1_contents). The .textPanel height is the surrounding div were the editor should fit in. I added 10px because I needed that for my layout.

我认为它可以是一点点更高效率（它启动调整大小的编辑器的次数），但现在它终于完美无缺地在我最近的浏览器（ff，即chrome和safari）。

I think it can be a littlebit more efficiënt (it initiates the resizing as many times as there are editors) but for now it is finally working flawlessly in all my recent browsers (ff, ie, chrome and safari).

这篇关于CKEditor 3.0高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！