make both editors in the same size when they autogrowing

Question

I'm using two CKEDITOR's editors in one page, and I them to be in the same size all the time. I'm using the auto grow plugin, so I tried it:

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());
}

it didn't worked. It did resized the second editor to the size of the first one, but it didn't resized the first to the size of the second when it was needed. What to do?

Here is a JSfiddle: http://jsfiddle.net/povw33x7/

Answer 1

Forget all I said before (I deleted it, but you can still see it in the revision history).

Using some code I found on this Web site, you can calculate the height of the box. Now, you just need to apply that to update the box heights on resize:

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());
    }

}

As you can see on this JSFiddle: http://jsfiddle.net/povw33x7/3/. This solution is cleaner than the other one, although it still has a glitch as it may leave an extra empty space (the height of a line) in one of the boxes.