Question

Sample

This is some text in an editable div. This can span over multiple lines, paragraphs and
so on and so forth. What I want to do is find the relative position of the caret right here. Meaning, the caret is positioned {top:’5px’, left:’250px’}, relative to the div or the document.

The idea is to then provide drop downs with options. Is this possible directly or will I have to concoct a solution based on the div line-height, padding,.. + caret position etc?

Answer 1

Check this demo from rangy. Maybe just what you are looking for:

https://github.com/timdown/rangy/blob/master/demos/position.html

If you look at the code, you’ll be able to see this:

var startPos = rangy.getSelection().getStartDocumentPos(); // get x, y of selection/cursor

and then you can use startPos.x and startPos.y