syncronized scroll does not work in div based ckeditor

Question

Basically i have 2 instances of ckeditor on a single page. One on the left and another in the right side of the page. The left editor uses a div rather than traditional iframe. I've done this by removing the iframe plugin and including the div editing area plugin. The right editor loads in an iframe and but is also div based(i can use the iframe editor as well on the right if required, not an issue).

Now if the cursor/focus is on the right editor's content area then the left editor should scroll along with it. I've tried to use the code as provied by Reinmar in below url but it seems to work only with editors based on iframe on both sides. Also please note that i'm using jquery adapter for initializing the editors.

CKEDITOR how to Identify scroll event

I initialized the editor on left as below:

var editor_left =  $( '#editor_left' ).ckeditor();

And below is my code for the right editor:-

var editor_right =  $( '#editor_right' ).ckeditor();
editor_right.editor.on( 'contentDom', function() {
    var editable = editor_right.editor.editable();

    editable.attachListener( editable.getDocument(), 'scroll', function() {
        alert('scroll detected');
        parent.$('#left_editor_content_area').scrollTop($(this).scrollTop())
    });
});

If i use the iframe based editor on the right then i'm able to get the "scroll detected" alert. But the scrollTop() function still does not work as expected

Any help will be appreciated.

Answer 1

The code that you mentioned is right. You got to update scrollTop property of the div-based editable with the scroll position of the window inside the iframe-based editor (JSFiddle).

var editor_div = CKEDITOR.replace( 'editor_div', {
    extraPlugins: 'divarea'
} );

CKEDITOR.replace( 'editor_iframe', {
    on: {
        contentDom: function() {
            var editable = this.editable(),
                win = this.document.getWindow(),
                doc = editable.getDocument();

            editable.attachListener( doc, 'scroll', function( evt ) {
                // Get scroll position of iframe-based editor.
                var scroll = win.getScrollPosition();

                // Update scroll position in the div-based editor.
                editor_div.editable().$.scrollTop = scroll.y;
            } );            
        }
    }
} );