Set the caret at the end of the content in Froala 2

Question

I'm using Froala 2 and the documentation doesn't seem to have anything that implies a simple way to set the location of the caret, let alone at the beginning or end. I'm trying to seed the editor instance with a little content in certain cases and when I do using html.set, the caret just stays where it is at the beginning and I want to move it to the end. The internet doesn't seem to have anything helpful around this for v2.

Answer 1

Froala support provided an answer for me that works:

var editor = $('#edit').data('froala.editor');
editor.selection.setAtEnd(editor.$el.get(0));
editor.selection.restore();

Answer 2

As far as I know, Froala 2 doesn't provide any API to do this, but you can use native JavaScript Selection API.

This code should do the job:

// Selects the contenteditable element. You may have to change the selector.
var element = document.querySelector("#froala-editor .fr-element");
// Selects the last and the deepest child of the element.
while (element.lastChild) {
  element = element.lastChild;
}

// Gets length of the element's content.
var textLength = element.textContent.length;

var range = document.createRange();
var selection = window.getSelection();

// Sets selection position to the end of the element.
range.setStart(element, textLength);
range.setEnd(element, textLength);
// Removes other selection ranges.
selection.removeAllRanges();
// Adds the range to the selection.
selection.addRange(range);

See also:

• How to set caret(cursor) position in contenteditable element (div)?
• Set caret position at a specific position in contenteditable div