I have a contentEditable
div in which I have multiple tags (br
, b
, u
, i
) and text.
I need to get the caret index position relative to the div, including all the tags.
For example:
<div id="h" contenteditable="true">abc<b>def<br>ghi</b>jkl</div>
If the cursor is between g
and h
, I need the caret index position to be 14
.
The problem is that the found methods that use a treeWalker
do not work in this case.
The bold tag is not found... probably because it isn't closed.
Also I have tried several methods but still no luck.
I need it to work in Firefox. Thank you.
just had to do this so there is some working solution (some testing may be required)
basic idea is to:
get textContent position using this method: Get caret (cursor) position in contentEditable area containing HTML content
iterate through innerHTML of an element to the textContent position
if html tag or entity is encountered, iterate through it until normal char, then continue
sample code here: