Question

我可以使用

轻松更改CKEditor内容区域的高度

config.height = 400;
config.autoGrow_minHeight = 200;

和类似的。

然而，当窗口调整大小时，我无法使设计响应顶部栏的高度变化。到目前为止我看到的所有文档似乎都只影响内容区域的高度而不是整个CKEditor（即顶部栏，内容区域和底栏）。

我尝试使用jQuery和plain JS访问ID为cke_1_top的顶部范围的高度，然后将内容区域设置为所需的总高度减去顶部的高度和底部的高度。但是我似乎无法选择它。

有没有办法设置整个区域的高度或从顶部和底部获取高度，以便我可以使用它们来计算内容高度应该是多少？

编辑0：

希望这比我最初写的更有意义。

以下是我认为代码的相关部分的基本概要：

<div id="cke_rawText">
    <span id="cke_rawText-arialbl"></span>
    <div class="cke_inner cke_reset">
        <span id="cke_1_top"></span>
        <div id="cke_1_contents"></div>
        <span id="cke_1_bottom"></span>
    </div>
</div>

我可以使用cke_1_contents之类的内容更改config.height = 400的高度。我希望整个区域保持恒定的高度，当窗口变窄时，顶部栏会变得更高，因为图标被推入新行。文本区域保持不变，这意味着整个编辑器占用页面上更多的垂直空间。

我的想法是获得cke_1_top和cke_1_bottom的高度，然后从cke_inner的高度减去它们，这应该会填满所有cke_rawText。但是，我无法选择这些元素。我尝试过使用纯JS，jQuery和CKEditor的getById方法（http://docs.ckeditor.com/#!/api/CKEDITOR.dom.document）。我得到null，这意味着它找不到我的元素。

查看Louys Patrice Bessette's示例，我无法执行以下操作：$("#CKform").css({"top":"30%"});，因为我无法选择html元素。

我可以在我的css文件中更改高度，但我似乎无法使用JS动态执行此操作，因为我无法选择CKEditor的元素。也许我的问题更多的是JS问题而不是CKEditor。

编辑1：

我想我已经弄明白了。由于CKEditor html是动态生成的，我需要在jQuery中使用事件委托。如果其他人遇到同样的问题，我发现this post很有用。

编辑2：

这似乎有效：

$(window).resize (function(event) {
    event.preventDefault();
    var i = parseInt($('.cke_inner').css("height"));
    var t = parseInt($('#cke_1_top').css("height")) + 9;
    var b = parseInt($('#cke_1_bottom').css("height")) + 9;
    var m = i - t - b;
    $('#cke_1_contents').css({"height" : m});
});

我不是百分之百确定9为什么是必要的，但是.css返回的值与通过检查元素找到的高度相比正好偏离了该数量。

Answer 1

我再次彻底消灭了我以前的答案。

您希望按比例将可编辑区域扩展为负宽度窗口调整大小 .oO（我希望这次能清楚地理解这个问题!!!）

好。

试试这段代码（位于this new Fiddle）：

// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1', {
    height : 200,
    autoGrow_minHeight : 200,
    on:{
        resize: function(){
            $("#msg").html("CKEditor resized!");
            $("#2nd").html("This is a different event!");
        }
    }
});

var cke_1_top_Width_memory;

window.onresize = function(e) {

    $("#msg").html("Window resized!");
    cke_1_top_Width = $(document).find("#cke_1_top").css("width");

    console.log("");
    console.log("onresize fct begin, cke_1_top_Width_memory: "+cke_1_top_Width_memory);     // undefined on the first pass.

    // If previous value is different, change the CKE editable zone height
    if(cke_1_top_Width!=cke_1_top_Width_memory){

        console.log("CKE Height is changing!");

        // Calculate difference between the 2 values
        diff=parseInt(cke_1_top_Width_memory)-parseInt(cke_1_top_Width);

        cke_1_contents = parseInt($(document).find("#cke_1_contents").css("height"));
        console.log("cke_1_contents height: "+cke_1_contents+"px");

        New_cke_1_contents = cke_1_contents+((diff*16)/4)+"px";     // assuming 16 px is something like on line... For each 4 px lost on width.
        // To ensure a minimal height
        if(New_cke_1_contents<"200px"){
            New_cke_1_contents="200px";
        }

        $(document).find("#cke_1_contents").css({"height":New_cke_1_contents});

        after = $(document).find("#cke_1_contents").css("height");
        console.log("cke_1_contents height - after: : "+after);
    }

    // update mem
    cke_1_top_Width_memory = cke_1_top_Width;

    console.log("onresize fct end, cke_1_top_Width_memory: "+cke_1_top_Width);

    //$("#CKform").css({"top":"30%"});
    $("#2nd").html("Also try to resize CKEditor by dragging it's bottom-right corner");
};

现在，有了这段代码，我认为你应该走上正确的道路去做你想做的事。
这不完美......

历史回顾：
我的第一个jsFiddle

Answer 2

以下是我为使整个CKEditor保持恒定高度所做的工作：

$(window).resize (function(event) {
    event.preventDefault();
    var i = parseInt($('.cke_inner').css("height"));
    var t = parseInt($('#cke_1_top').css("height")) + 9;
    var b = parseInt($('#cke_1_bottom').css("height")) + 9;
    var m = i - t - b;
    $('#cke_1_contents').css({"height" : m});
});

由于动态生成了CKEditor的HTML，因此需要在jQuery中使用事件委托来访问它生成的DOM元素。

我不能100％确定为什么9s是必要的，但是.css返回的值与通过检查元素找到的高度相比正好偏离了该值。

根据顶部和底部的高度调整内容高度

2 个答案: