TinyMCE scroll to caret position on enter

Question

I have a TinyMCE editor in a fixed sized window, which is an absolute positioned div element.

While entering text everything behaves properly. When reaching the bottom of the window the editor will scroll when the text breaks onto the next line so what is being typed is always visible.

However, when ENTER is pressed, the caret will move out of the visible window and the editor does not scroll. When ENTER is pressed multiple times the scroll bar will move indicating that I'm now looking at the middle of the document rather than at the end. Once I enter more text the editor will scroll to the new position at the end of the document.

I have tried to insert text using a keyup event handler when ENTER is pressed with:

editor.selection.setContent("TEST");

and the text is being inserted at the correct place (current caret position), but still the editor won't scroll until more text is typed at which point it will jump to the correct position, i.e. to the last TEST that was inserted by pressing ENTER.

Any idea what's wrong here and how I can get the editor to scroll properly when ENTER is pressed at the bottom of the window?

IamNaN IamNaN · Accepted Answer · 2018-02-18T15:56:22

After a lot of searching, reading and trial and error I came up with the following solution:

setup: function (editor) {
    editor.on("keyup", function(event) {
        if (event.keyCode === 13) {
            editor.selection.getNode().scrollIntoView(false);
        }
    }
}

It's not perfect but pretty close. When ENTER is pressed at the bottom of the document it will now properly scroll. When scrolling back up and pressing ENTER there the current caret position will scroll to the bottom of the window. But that's another problem and the original problem is solved.

TinyMCE scroll to caret position on enter

1 Answers