Как получить позицию курсора в contentEditable, содержащей HTML?

Question

Мне нужно получить позицию курсора в div contentDditable. Я получаю полезную функцию от Get a range's start and end offset's relative to its parent container и https://stackoverflow.com/a/4770562/2008261.

Но эти функции НЕ помогают, потому что мне нужна фактическая позиция в HTML, вот что мне нужно.

, если у меня есть:

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

и я поставил курсор перед словом «текст» он возвращает 7, как это имеет дело с текстом. Но мне нужно, чтобы он возвращался 10, как будто он имеет дело с внутренним HTML-массивом div contentEditabe.

Эти функции я уже говорил ранее:

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; 
} 

И:

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

Достигнув решать это раньше (я создал слово веб на основе процессора): единственным жизнеспособным решением является подойти к дереву DOM и подсчитать длину innerHTML и outerHTML, а затем использовать смещение в пределах диапазона, если оно есть.

Я также очень обескураживаю использование contentEditable реализаций, вы потратите гораздо больше времени, пытаясь исправить то, что с ними не так, и попытаться переопределить их поведение, чем вы будете кодировать нужные вам функции.

Моя реализация была функцией, которая приняла смещение диапазона и подошла, пока она не попала в указанный родитель. Некоторые вещи, о которых следует помнить, предыдущие братья и сестры легко добавить, но обертывание родителей сложно с атрибутами и т. Д. Для учета длины.

Мой расчет был взять на себя всю длину узла "<div id="" class="" foo="bar">sometext</div>", вычесть длину innerHTML, вычесть длину tagname и subtract 3, чтобы получить длину <div id="" class="" foo="bar">

но если вы не контролировала создание что HTML, ваш счет все еще может быть неправильным, поскольку в зависимости от браузера несколько пробелов в строке возвращаются как 1 символ или несколько символов при тестировании длины.