1

我在一页中使用了两个 CKEDITOR 的编辑器,而且我一直使用相同的大小。我正在使用自动增长插件,所以我尝试了它:

CKEDITOR.plugins.addExternal( 'autogrow', location.href + 'ckeditor/autogrow/', 'plugin.js' );
var e1 = CKEDITOR.replace("heb_editor", {extraPlugins: 'autogrow'});
var e2 = CKEDITOR.replace("eng_editor", {extraPlugins: 'autogrow'});
e1.on("resize", r);
e2.on("resize", r);

function r(){
    if($("#cke_1_contents").height() > e2.config.height)
        $("#cke_2_contents").height($("#cke_1_contents").height());
    else
        $("#cke_1_contents").height($("#cke_2_contents").height());
}

它没有用。它确实将第二个编辑器的大小调整为第一个的大小,但它没有在需要时将第一个编辑器的大小调整为第二个的大小。该怎么办?

这是一个 JSfiddle:http: //jsfiddle.net/povw33x7/

4

1 回答 1

2

忘记我之前所说的(我删除了它,但你仍然可以在修订历史中看到它)。

使用我在这个网站上找到的一些代码,您可以计算出盒子的高度。现在,您只需要应用它来更新调整大小的框高度:

function getBoxHeight(boxId) {

    // using a function to get the height of the box from ==> 
    var ckeditorFrame = $('#' + boxId + ' iframe');
    var innerDoc = (ckeditorFrame.get(0).contentDocument) ? ckeditorFrame.get(0).contentDocument : ckeditorFrame.get(0).contentWindow.document;
    var messageHeight = $(innerDoc.body).height();

    return messageHeight ? messageHeight : 0;
}

function r() {

    if (getBoxHeight("cke_1_contents") > getBoxHeight("cke_2_contents")) {
        $("#cke_2_contents").height($("#cke_1_contents").height());
    } else {
        $("#cke_1_contents").height($("#cke_2_contents").height());
    }

}

正如您在此 JSFiddle 上看到的那样:http: //jsfiddle.net/povw33x7/3/。这个解决方案比另一个更干净,尽管它仍然有一个小故障,因为它可能会在其中一个盒子中留下额外的空白空间(一条线的高度)。

于 2015-04-02T13:28:45.420 回答