根据顶部和底部的高度更改内容高度

Question

我可以使用

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

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

和类似的。

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

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

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

编辑 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>

我可以用 config.height = 400 之类的东西改变 cke_1_contents 的高度。我希望整个区域保持恒定高度，并且随着 window 变窄，顶部栏变高，因为图标被推入新行。文本区域保持不变，这意味着整个编辑器在页面上占据了更多的垂直 space。

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

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

我可以在我的 css 文件中更改高度，但我似乎无法使用 JS 动态地这样做，因为我不能 select CKEditor 的元素。也许我的问题比 CKEditor 更像是一个 JS 问题。

编辑 1：

我想我明白了。由于CKEditorhtml是动态生成的，所以我需要在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});
});

我不是 100% 确定为什么 9 是必需的，但是 .css returns 的值与我通过检查元素找到的高度相比正好偏离了那个数量。

Answer 1

我又把之前的答案彻底抹掉了。

您想按负宽度 window 调整大小按比例扩展可编辑区域。
.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% 确定为什么 9 是必需的，但是 .css returns 的值与我通过检查元素找到的高度相比正好偏离了这个数量。

根据顶部和底部的高度更改内容高度

Make content height change based on height of top and bottom

javascript

css

jquery

ckeditor

ckeditor4.x