Holen Sie sich die caret-position in contenteditable div-tags eingeschlossen

Ich habe eine contenteditable div, in dem ich mehrere tags (br, b, u, i), und text und ich brauche, um die Cursor-position relativ zu dem div, inklusive aller tags.

Beispiel: 

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

Wenn sich der cursor zwischen g und h, ich brauche die position des Einfügezeichens auf sein 14.
Das problem ist, dass die gefundenen Methoden, mit denen ein treeWalker funktionieren nicht in diesem Fall.
Der bold-tag nicht gefunden... wahrscheinlich, weil es nicht geschlossen ist.
Auch ich habe versucht, verschiedene Methoden, aber immer noch kein Glück.

Ich brauche es zum arbeiten Firefox.
Danke.

  • Warum brauchen Sie diese Zahl? Es ist im Grunde bedeutungslos, da es viele Möglichkeiten zur Darstellung der gleichen DOM mit verschiedenen HTML -, die eine Auswirkung auf die Zahl (z.B. durch die Verwendung <br /> statt <br>). Ich nehme an, Sie wollen dieses, so können Sie ein offset relativ zu der HTML-string, den Sie senden, die vom server an den browser.
  • ja... das ist genau das, warum brauche ich die Anzahl. Ich habe versucht, mehrere Mittel, aber noch keinen Erfolg.
  • Es gibt keinen Weg, um wieder die ursprüngliche HTML-string über den DOM, so müssen Sie re-request der Seite über Ajax, das Parsen der HTML-und es passen bis zu den aktuellen DOM. Es wird ziemlich schwierig sein.
InformationsquelleAutor helldrain | 2013-05-24
  1. 19

    Haben Sie versucht das?
    Holen Sie sich einen Bereich des start-und end-offset ist relativ zum übergeordneten container

    Direkte link zum jsfiddle:
    https://jsfiddle.net/TjXEG/1/

    Funktion code:

    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;
    • Danke für deine Antwort. Das problem ist, dass der <br> wird nicht berücksichtigt bei der Bestimmung der position der Einfügemarke.
    • Ich Frage mich, wenn es Ihnen gelungen ist, eine Lösung zu finden, die beinhaltet die tags.
    • gibt es eine Funktion, die Länge des tags . ?
    InformationsquelleAutor Eric McCormick
  2. 4

    mussten es einfach tun dieses, so gibt es einige funktionierende Lösung (einige Tests können erforderlich sein).

    Grundidee ist:

    1. bekommen textContent position mit dieser Methode: Holen Sie sich Einfügemarke (cursor -) position in contentEditable Bereich mit HTML-Inhalt

    2. Durchlaufen innerHTML von einem element zu den textContent-position

    3. wenn html-tag oder Entität gefunden wird, Durchlaufen wird, bis der normale char, dann weiter

    Beispielcode hier:

    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;
}
    • Du bist mein held. Dies hat wunderbar funktioniert und hat mich gerettet Stunden der Tränen.
    • Welche Funktion verwiesen wird, für getCaretPosition(element)? Es scheint nicht, Sie haben auch Ihre definition.
    • Lesen Sie den ersten Punkt der Antwort, dort ist der link für diese Funktion
    InformationsquelleAutor YangombiUmpakati
Schreibe einen Kommentar