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.

Shama

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

Shama

This answer is correct, however the thing that tripped me up is the editor has to already be focused for it to work. If you want to force focus on the editor before calling this call editor.events.focus(). – Bolanos

editor.$el.get(0) in this context did not always work as expected. What worked better for me was editor.selection.endElement(). – Rustcolored

My answer applied to some version of Froala 2. Maybe you're using a newer version where my answer doesn't work as well anymore? – Shama

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

Earpiece