CKEditor “overflow: scroll” on parent causes toolbar to freeze at initial position

问题

When you add a CKEditor to a div inside a div with: "overflow: scroll" the toolbar won't move when scrolling the parent div...

<div id="wrapper" style="overflow: scroll;">
    <div contenteditable="true">This is the ckedito</div>     
</div>

An example can be found here: http://jsfiddle.net/W8Dt4/

Does anyone know a workaround around this problem?

I think the desired behaviour would be:

Keep the toolbar at the top of the editor div when there's enough room.
Move the toolbar to the bottom of the editor div when there's not enough room on top and there is enough room on the bottom.

回答1:

Using version 4.4.3, I was able to solve this problem by fire the window scroll event in a similar way that it is done in other areas in CKEditor. Attach a scroll event to the parent container that has overflow:scroll; set on it and trigger the window scroll within. The positioning is a little clunky but still works.

$("#parent-with-scroll").on('scroll', function (evt) {
    CKEDITOR.document.getWindow().fire('scroll');
});

回答2:

Yup. CKEditor never considered such case and, most likely, editor will never deal with such edge case.

Still, what you need is a scroll listener for editor.element.getParent() in those lines of floatingspace plugin. Unfortunately, you have to wait for the ticket #9816 to be resolved, because it changes the way of re-positioning the toolbar, and makes your case possible to fix. Once the fix is released (in 4.2.1), you got to basically change the lines to look like this:

var elementParent = editor.element.getParent();

editor.on( 'focus', function( evt ) {
    ...
    elementParent.on( 'scroll', uiBuffer.input );
} );

editor.on( 'blur', function() {
    ...
    elementParent.removeListener( 'scroll', uiBuffer.input );
} );

editor.on( 'destroy', function() {
    ...
    elementParent.removeListener( 'scroll', uiBuffer.input );
} );

If you want, you can give it a try with this ticket branch. Otherwise, you got to need to wait for the upcoming release to patch your code.

There's also one thing that you need to know: each floating toolbar is appended to <body>, so it will never belong to the same (overflowed) container enclosing your editor. Even though the toolbar will scroll along with the container, it will always float above it and there's not much you can do about it unless you also hack this line. Note that I haven't tested it.

I hope this helped you.

来源：https://stackoverflow.com/questions/18229049/ckeditor-overflow-scroll-on-parent-causes-toolbar-to-freeze-at-initial-positi

标签

ckeditor

overflow