Ottieni la posizione del caret in div contenteditable compresi i tag

Question

Ho un div contentedit in cui ho più tag (br, b, u, i) e testo e ho bisogno di ottenere la posizione del caret relativa al div, compresi tutti i tag .

Ad esempio:

<div id="h" contenteditable="true">abc<b>def<br>ghi</b>jkl</div> 

Se il cursore è tra g ed h, devo posizione del cursore di essere 14. Il problema è che i metodi trovato che utilizzano un TreeWalker non funzionano in questo caso . Il tag grassetto non viene trovato ... probabilmente perché non è chiuso. Inoltre ho provato diversi metodi ma ancora senza fortuna.

Ho bisogno che funzioni in Firefox. Grazie.

Answer 1

Hai provato questo? Get a range's start and end offset's relative to its parent container

Link diretto al jsfiddle: codice di https://jsfiddle.net/TjXEG/1/

Funzione:

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 showCaretPos() { 
    var el = document.getElementById("test"); 
    var caretPosEl = document.getElementById("caretPos"); 
    caretPosEl.innerHTML = "Caret position: " + getCaretCharacterOffsetWithin(el); 
} 

document.body.onkeyup = showCaretPos; 
document.body.onmouseup = showCaretPos; 

Answer 2

solo dovuto fare questo quindi c'è qualche soluzione di lavoro (alcuni test può essere richiesto)

l'idea di base è:

1. ottenere la posizione textContent con questo metodo: Get caret (cursor) position in contentEditable area containing HTML content

2. iterare attraverso innerHTML di un elemento nella posizione textContent

3. se si incontra tag html o entità, scorrere fino char normale, quindi continuare

codice di esempio qui:

function getHTMLCaretPosition(element) { 
var textPosition = getCaretPosition(element), 
    htmlContent = element.innerHTML, 
    textIndex = 0, 
    htmlIndex = 0, 
    insideHtml = false, 
    htmlBeginChars = ['&', '<'], 
    htmlEndChars = [';', '>']; 


if (textPosition == 0) { 
    return 0; 
} 

while(textIndex < textPosition) { 

    htmlIndex++; 

    // check if next character is html and if it is, iterate with htmlIndex to the next non-html character 
    while(htmlBeginChars.indexOf(htmlContent.charAt(htmlIndex)) > -1) { 
    // console.log('encountered HTML'); 
    // now iterate to the ending char 
    insideHtml = true; 

    while(insideHtml) { 
     if (htmlEndChars.indexOf(htmlContent.charAt(htmlIndex)) > -1) { 
     if (htmlContent.charAt(htmlIndex) == ';') { 
      htmlIndex--; // entity is char itself 
     } 
     // console.log('encountered end of HTML'); 
     insideHtml = false; 
     } 
     htmlIndex++; 
    } 
    } 
    textIndex++; 
} 

//console.log(htmlIndex); 
//console.log(textPosition); 
// in htmlIndex is caret position inside html 
return htmlIndex; 
}