Question

基本上我在一个页面上有2个ckeditor实例。一个在左边，另一个在页面的右边。左编辑器使用div而不是传统的iframe。我通过删除iframe插件并包含div编辑区域插件来完成此操作。正确的编辑器加载到iframe中，但也是基于div的（如果需要，我可以在右侧使用iframe编辑器，而不是问题）。

现在，如果光标/焦点位于右侧编辑器的内容区域，则左侧编辑器应随之滚动。我尝试使用Reinmar在下面的url中提供的代码，但它似乎只适用于基于双方iframe的编辑器。另请注意，我使用jquery适配器来初始化编辑器。

CKEDITOR how to Identify scroll event

我在左边初始化了编辑器，如下所示：

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

以下是我正确编辑的代码： -

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

如果我在右侧使用基于iframe的编辑器，那么我可以检测到＆＃34;滚动＆＃34;警报。但scrollTop（）函数仍无法按预期工作

任何帮助将不胜感激。

Answer 1

您提到的代码是对的。您必须使用基于iframe的编辑器（JSFiddle）内的窗口滚动位置更新基于div的可编辑的scrollTop属性。

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

同步滚动在基于div的ckeditor中不起作用

1 个答案: