Holen Sie die Einfügemarke (Cursor) in contentEditable Bereich, der HTML-Inhalt enthält

Habe ich contentEditable-element - (p, div, ...) und ich würde gern an der Einfügemarke (cursor -) position. In der Regel kann ich es erreichen, mit diesem Stück code:

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

Dies funktioniert sehr gut, während das element enthält nur text. Aber, wenn das element enthält einige HTML-Formatierungen, die zurückgegebene position ist relativ zur position der Einfügemarke innerhalb enthalten HTML-element.

Nehmen wir an, die Inhalte des contentEditable-element ist dieses:

AB<b>CD</b>EF

Wenn caret-Zeichen innerhalb <b></b>sagen wir zwischen C und D, die zurückgegebene position mit obigen code ist 1 anstelle von 3 (gezählt vom Anfang des contentEditable-element-content)

Kann jemand kommen mit Lösung ?

InformationsquelleAutor der Frage Frodik | 2011-01-22

  1. 51

    UPDATE

    Ich geschrieben habe, eine einfachere version von diesem, das funktioniert auch im IE < 9:

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

    Alte Antwort

    Dies ist eigentlich ein nützlicher Ergebnis als ein Zeichen-offset innerhalb der text des gesamten Dokuments: startOffset Eigenschaft eines DOM-Bereich (das ist, was window.getSelection().getRangeAt() gibt) ist ein offset relativ zu seiner startContainer - Eigenschaft (die nicht unbedingt immer einen text-Knoten, übrigens). Allerdings, wenn Sie wirklich wollen, ein Zeichen-offset, hier ist eine Funktion, die es tun.

    Hier ein live-Beispiel: http://jsfiddle.net/timdown/2YcaX/

    Hier ist die Funktion:

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

    InformationsquelleAutor der Antwort Tim Down

  2. 4

    Dies ist ein sehr Alter Beitrag, aber immer noch eines der ersten Ergebnisse bei Google gesucht, also vielleicht noch nützlich. Dies funktioniert für mich, um die Rechte position in Anbetracht html-tags und Zeilenumbrüche als gut (getestet mit Firefox):

    function getCaretPosition (node) {
    var range = window.getSelection().getRangeAt(0),
        preCaretRange = range.cloneRange(),
        caretPosition,
        tmp = document.createElement("div");

    preCaretRange.selectNodeContents(node);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    tmp.appendChild(preCaretRange.cloneContents());
    caretPosition = tmp.innerHTML.length;
    return caretPosition;
}

    Es nutzt die cloneContents Funktionalität, um die eigentliche html und fügt die documentfragment, um eine temporäre div, um die html-Länge.

    InformationsquelleAutor der Antwort Andrea

  3. 1

    Wenn Sie wollen " element einfügen, dann können Sie versuchen, so etwas zu tun:

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

    InformationsquelleAutor der Antwort Antti

Schreibe einen Kommentar