Changing order of two divs with CKEditors

Question

I have two CKEditors, created by Liferay script, one by one in my view. Both are in seperated divs. I would like to change its order.

I try to use something like this:

var firstDivWithCKEditor = document.getElementById("firstDivWithCKEditor");
var secondDivWithCKEditor = document.getElementById("secondDivWithCKEditor "); 
var parentDiv = secondDivWithCKEditor.parentNode();
parent.insertBefore(secondDivWithCKEditor , firstDivWithCKEditor);

The order is changed, but after this operation I can't do enything with on one editor and the html inside editor disapears. After clickling any button in editor I get error on a console: Uncaught TypeError: Cannot read property 'getSelection' of undefined.

Anyone has any idea what is wrong?

Answer 1

There's no way to do this with classic (iframe–based) editor instances. You can easily re–initialise your instances though (JSFiddle):

var e1, e2,
    el1 = CKEDITOR.document.getById( 'editor1' ),
    el2 = CKEDITOR.document.getById( 'editor2' );

function initEditors( reverse ) {    
    if ( e1 || e2 ) {
        e1.destroy();
        e2.destroy();        
    }

    ( reverse ? el2 : el1 ).insertBefore( ( reverse ? el1 : el2 ) );

    e1 = CKEDITOR.replace( el1 );
    e2 = CKEDITOR.replace( el2 );
}