Setting range: the startContainer is wrong

Question

Here's my code:

var range = editor.selection.getRng();
range.setStart(range.startContainer, 2);

Everything works fine for Chrome, but in Firefox I get error Index or size is negative or greater than the allowed amount. In Chrome, range.startContainer is a text element, and in Firefox it's HtmlParagraphElement.

Why is this happening in FF and how to convert this paragraph tag to a text?

I tried:

range.setStart(range.startContainer.firstChild, 2);

but it doesn't work.

Answer 1

The startContainer reported by Firefox is not wrong, it's just different. startContainer can theoretically refer to any kind of node and there are some variations in how different browsers choose to represent certain kinds of selections.

If you want to do everything in terms of character offsets within the text content of the editor, you could use something like this answer. If you just want a solution for this particular case, I would suggest simply checking the startContainer's node type. Note that the following assumes that the first child of your <p> element is a text node:

var range = editor.selection.getRng();
var startNode = range.startContainer;
if (startNode.nodeType !== 3) {
    startNode = startNode.firstChild;
}
range.setStart(startNode, 2);