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/

If I may put my two cents in, CKEditor 4.5 will provide an easier way to deal with the problem because [`resize` event will pass new dimensions to the callback](https://dev.ckeditor.com/ticket/11905). Stay tuned! — oleq, Apr 02 '15 at 14:04

score 1 · Accepted Answer · edited May 23 '17 at 12:22

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.

That's much better, but it still doesn't work well. If you erase lines from one of the boxes, it makes the other box smaller even if the other box if filled with text. http://prntscr.com/6oks69 (Sorry for my bad English) — , Apr 02 '15 at 13:36
@GINCHER I think this looks cleaner and works better than before — Alvaro Montoro, Apr 02 '15 at 14:24

make both editors in the same size when they autogrowing

1 Answers1