contenteditable markierten text speichern und wiederherstellen

Stieß ich auf diesen Beitrag, der zeigt, 2 Funktionen, wie das speichern und wiederherstellen, den ausgewählten text aus einem contenteditable div. Ich habe die unten div eingestellt als contenteditable und die 2 Funktion aus dem anderen post. Wie kann ich diese Funktionen verwenden, speichern und wiederherstellen, den ausgewählten text. 

<div style="width:300px;padding:10px;" contenteditable="true">test test test test</div>

<script>
function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}
</script>
  • Sie müssen mit den Methoden des Range-Objekts (siehe mozilla-doc: developer.mozilla.org/en/DOM/range ). Im Grunde genommen, eine Reihe besteht aus einer Knoten-und offset innerhalb dieses Knotens. Eine Möglichkeit zum speichern der HTML-zusammen mit der Auswahl ist die Verwendung von "carets" (siehe Schließung der Bibliothek für Ideen: closure-library.googlecode.com/svn/docs/... ).
InformationsquelleAutor Hussein | 2011-01-14
  1. 20

    Eine typische Anwendung wäre die Anzeige eine Art von widget oder einen dialog zu akzeptieren, die Eingaben vom Benutzer (und damit möglicherweise die Zerstörung der ursprünglichen Auswahl) und wiederherstellen der Auswahl, nachdem das widget ausgeblendet wurde. Verwenden der Funktionen ist Recht einfach, die größte Gefahr ist, versuchen, um die Auswahl zu speichern, nachdem es bereits zerstört worden.

    Hier ist ein einfaches Beispiel. Es zeigt eine text-Eingaben und überschreibt die Auswahl der bearbeitbaren <div> mit dem text aus der Eingabe. Es gibt zu viel code zum einfügen in hier, also hier ist der vollständige code: http://www.jsfiddle.net/timdown/cCAWC/3/

    Auszug:

    <div id="test" contenteditable="true">Some editable text</div>
<input type="button" unselectable="on" onclick="displayTextInserter();"
    value="Insert text">
<div id="textInserter">
    <input type="text" id="textToInsert">
    <input type="button" onclick="insertText()" value="Insert">
</div>

<script type="text/javascript">
var selRange;

function displayTextInserter() {
    selRange = saveSelection();
    document.getElementById("textInserter").style.display = "block";
    document.getElementById("textToInsert").focus();
}     

function insertText() {
    var text = document.getElementById("textToInsert").value;
    document.getElementById("textInserter").style.display = "none";
    restoreSelection(selRange);
    document.getElementById("test").focus();
    insertTextAtCursor(text);
}
</script>
    • +1, ich war auf der Suche nach genau dieser Lösung. Danke you made my day.
    • Tim, wie würden Sie die saveSelection() und restoreSelection(range) in einer Weise, dass Sie Gegner der contenteditable div ? also so wie es saveSelection('mycontentId')` und restoreSelection(Bereich 'mycontentId') ? Ich bin versucht, es auf zwei separaten 'div' s und ich muss das Ziel jedes ? Gibt es eine Möglichkeit zu integrieren getElementById im zwei Funktionen, so kann ich den Gegner ?
    • Die Auswahl gebunden ist, um das Dokument, nicht einzelne Elemente, aber es gibt nichts zu stoppen Sie sparen mehrere verschiedene Auswahlen. Könnten Sie ein konkretes Beispiel nennen, was Sie erreichen möchten?
    • danke für die Antwort! 🙂 Im Grunde genommen, versucht zu retten, durch elementId ? So konnte ich, zum Beispiel, rufen Sie, und stellen Sie Sie auf 2 verschiedenen elementId ' s ? also wie saveSelection('mycontentId') und dann restoreSelection('mycontentId') und geben Sie dann einfach die elementId, dass ich möchte, zu speichern und wieder zu verwenden es mehrmals ? Ich würde dein tolles plugin feingliedrig - allerdings habe ich wirklich nur diese Funktion benötigen und die lib-Größe ist wahrscheinlich zu groß
    • Oh, ich sehe, was du meinst. Ich denke, ich würde einfach ein simple object als hash: so etwas wie var selectionsById = {}; selectionsById['mycontentId'] = saveSelection(); restoreSelection(selectionsById['mycontentId']);.
    • Sehr gut! Aber wie kann ich das mit einem textarea statt dem div mit der id "test"?
    • Beachten Sie, dass document.selection gibt einen Kompilierungsfehler in Maschinenschrift, weil document.selection im Beispiel speziell für den IE.

    InformationsquelleAutor Tim Down
  2. 1

    nur eine Empfehlung:

    ist es schwer zu arbeiten mit nativen browser-Auswahl + contenteditable + Griff alle anderen browser Aspekte + speichern und wiederherstellen der Auswahl und etc von Grund auf neu..

    Ich würde empfehlen, feingliedrige https://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule

    die speziell gemacht, um all die harte Arbeit mit der Auswahl für Sie

    überprüfen Sie die Dokumentation, es ist einfach zu bedienen 😉
    hoffe, es wird Ihnen helfen,

    InformationsquelleAutor Nedudi
Schreibe einen Kommentar