Obtenir la position du curseur (curseur) dans le contenuEspace éditable contenant du contenu HTML

Question

J'ai contentEditable élément (peut être p, div, ...) et je voudrais obtenir un signe d'insertion (curseur) position. Je peux normalement arriver avec ce morceau de code:

var position = window.getSelection().getRangeAt(0).startOffset;

Cela fonctionne bien, tandis que l'élément contient du texte. Mais lorsque l'élément contient du code HTML mise en forme, le retour de position est relative à la position du curseur inclus dans l'élément HTML.

Supposons contenu de contentEditable élément est ceci:

AB<b>CD</b>EF

Si le curseur est à l'intérieur d' <b></b>, disons entre C et D, le retour de position avec le code ci-dessus est 1 au lieu de 3 (compté à partir du début de la contentEditable contenu de l'élément)

Quelqu'un peut-il venir avec la solution à cela ?

Answer 1

Mise à JOUR

J'ai écrit une version simplifiée de ce qui fonctionne dans IE < 9:

http://stackoverflow.com/a/4812022/96100

Vieille Réponse

C'est en fait un plus utile qu'un décalage de caractères dans le texte de l'ensemble du document: l' startOffset de la propriété d'un DOM Gamme (qui est ce que l' window.getSelection().getRangeAt() rendements) est un décalage par rapport à son startContainer de la propriété (ce qui n'est pas nécessairement toujours d'un nœud de texte, par la voie). Toutefois, si vous voulez vraiment un décalage de caractère, voici une fonction qui va le faire.

Voici un exemple vivant: http://jsfiddle.net/timdown/2YcaX/

Voici la fonction:

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 2

Si vous voulez insérer un élément, vous pouvez essayer de faire quelque chose comme ceci:

 // Get range
var range = document.caretRangeFromPoint(event.clientX, event.clientY);
if (range)
  range.insertNode(elementWhichYouWantToAddToContentEditable);