2

I think this question is simple, but I've been unable to figure it out. I hit a stopping point using the simpler solution for getting the caret position in a contenteditable div from Get caret position in contentEditable div. I've been attempting to get the line number of the caret position, and I've got a lot of the logic done, but because that one treats the end of one line the same as it treats the start of the next, it's proven pretty much impossible.

So, instead I've been trying to use the rangy library to get the caret position, in the hope that it treats the end of lines appropriately(counting the end of a line as one less than the start of the next,) but I haven't quite figured out how to get it to work the way I'd like. My code looks like this:

var sel = rangy.getSelection();
var range = sel.getRangeAt(0);
var cursorPos = sel.focusOffset;

It seems to work when I hit enter to go to a new line (the position is incremented by 1) but after that the caretPos starts again at 0 at the start of each line. Is there a way to get an overall cursor position, which accounts for new lines? To be clear, I'm not asking how to get the line number from rangy, just the caret position.

Thank you, and sorry if I'm missing something obvious.

Community
  • 1
  • 1
LiamD
  • 1,958
  • 2
  • 13
  • 13

1 Answers1

1

Rangy by itself does not have the capability to give you line numbers. sel.focusOffset in the code you show in the question is either an offset among the children of an element node or an offset in the text of a text node. If it appears to you to correspond to a line number, this is just chance.

Basically, rangy would not play an essential role in the problem you are presenting. Whatever system that would be able to provide line numbers would be able to work independently of rangy.

Edit in response to comment: Your question says "in the hope that it treats the end of lines appropriately(counting the end of a line as one less than the start of the next,)". Since the topic of conversation is Rangy, I'm understanding "it" as "Rangy." Rangy does not have a notion of "end of line", so it cannot treat them in any fashion.

Louis
  • 146,715
  • 28
  • 274
  • 320
  • Sorry, I should've been clearer. I've already got logic to get from the caret/cursor position to a line number (it involves just counting the new lines from the start to the caret position.) I just need a more accurate caret position, which I was hoping rangy could provide. That's what I'm trying to get from rangy, the caret position, not the line number. Is it possible to get the caret position in a contenteditable div that doesn't start over at every line? – LiamD Feb 20 '14 at 13:27
  • Hmm, alright. So you're saying that there's no way for Rangy to account for line breaks? Therefore, the code I posted is a correct way to get the caret position (ignoring the question of lines for a moment) within a contenteditable div? – LiamD Feb 20 '14 at 14:00
  • 1
    Right, Rangy has no notion of "line break". Something external to Rangy would have to interpret the DOM tree to determine where line breaks are. As for the 2nd question, a caret position is composed of two items: a node and an offset. So if you looked at `sel.focusNode` and `sel.focusOffset` together, you'd have a caret position. – Louis Feb 20 '14 at 14:06