Retain caret position in Froala editor after 'html.set' or 'snapshot.restore'

Question

I am trying to incorporate the Froala editor in a React component, and am having difficulties retaining the caret position after updating the content in the editor with the 'html.set' or 'snapshot.restore' methods.

The goal is to maintain Froala's editor content in React's state (using a Flux store):

Grabbing the HTML (and subsequently storing it in a Flux store) is not an issue with:

var content = $('#editor').froalaEditor('html.get', true);

However, when trying to flush the state back to Froala with:

$('#editor').froalaEditor('html.set', this.state.content);

the new HTML is updated without issue, but the caret stops blinking. The editor still has focus, but any new text entered is inserted outside of any <p> </p> tag content. This effectively makes the caret move up from the last position.

Alternatively, using the following to take and restore a snapshot:

var snap = $('#editor').froalaEditor('snapshot.get'); $('#editor').froalaEditor('snapshot.restore', snap);

moves the caret to the top left position in the editor.

Is there a way to get the caret position and re-focus on that position, after the HTML is set (or snapshop restored)?

This is using Froala 2.0.0-rc2, but the same behaviour exists in the latest 1.x release.

Answer 1

Restoring the snapshot should work. If you can make a jsFiddle with it not working, you could report it on the Github repo .

Another way of doing it would be to call selection.save before getting the HTML so that you get the HTML with markers in place. Then if you have the HTML with selection markers, the cursor will be placed at the position where it was before.