如何获取包含HTML的contentEditable中的光标位置？

Question

I need to get the cursor position in a contentEditable div. I get some helpful function from Get a range's start and end offset's relative to its parent container and https://stackoverflow.com/a/4770562/2008261 .

But these function do NOT help because I need the actual position in the HTML, Here is what I need.

if I have:

<div id="diva" contenteditable="true">Insert <b>text here</b></div>

and I put the cursor just before the word "text" it returns 7 as it deals with the text. But I need it to return 10 as if it deals with the inner HTML of the contentEditabe div.

These are the function I mentioned before :

function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
if (typeof window.getSelection != "undefined") {
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(element);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    caretOffset = preCaretRange.toString().length;
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
    var textRange = document.selection.createRange();
    var preCaretTextRange = document.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}

And :

function getCharacterOffsetWithin(range, node) {
var treeWalker = document.createTreeWalker(
    node,
    NodeFilter.SHOW_TEXT,
    function(node) {
        var nodeRange = document.createRange();
        nodeRange.selectNode(node);
        return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ?
            NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
    },
    false
);

var charCount = 0;
while (treeWalker.nextNode()) {
    charCount += treeWalker.currentNode.length;
}
if (range.startContainer.nodeType == 3) {
    charCount += range.startOffset;
}
return charCount;
}

Answer 1

Having had to tackle this before ( I created an web based word processor ): the only viable solution is to walk up the DOM tree and count both innerHTML and outerHTML lengths, and then use the offset within the range if there is one.

I also highly discourage the use of contentEditable implementations, you'll spend far more time trying to fix what is wrong with them and trying to override their behaviors than you will coding the features you actually want.

My implementation was a function that took a range offset and walked up until it hit the specified boundary parent. Some things to keep in mind, previous siblings are easy to add, but wrapping parents are tricky with attributes etc. to account for in length.

My calculation was to take the whole length of a node "<div id="" class="" foo="bar">sometext</div>" , subtract the length of the innerHTML , subtract the length of the tagname , and subtract 3 to get the length of <div id="" class="" foo="bar">

BUT unless YOU controlled the creation of that HTML, your count could still be wrong, as depending on browser multiple spaces in a row are returned as either 1 char or multiple chars when testing length.