contenteditable ausgewählten Text speichern und wiederherstellen

Question

Ich stieß auf diesen Beitrag, der 2 Funktionen zum Speichern und Wiederherstellen von ausgewählten Text aus einem contenteditable div zeigt. Ich habe die untere div als zufrieden stellbar und die 2 Funktion von der anderen post. Wie verwende ich diese Funktionen, um ausgewählten Text zu speichern und wiederherzustellen.

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

Answer 1

Eine typische Anwendung würde eine Art von Widgets oder Dialogeingabe von dem Benutzer zu akzeptieren, wird die Anzeige (damit möglicherweise die ursprüngliche Auswahl zu zerstören) und die Wiederherstellung die Auswahl Danach Widget ausgeblendet wurde. Tatsächlich ist die Verwendung der Funktionen ziemlich einfach; Die größte Gefahr besteht darin, die Auswahl zu speichern, nachdem sie bereits zerstört wurde.

Hier ist ein einfaches Beispiel. Es zeigt eine Texteingabe an und überschreibt die Auswahl in der editierbaren <div> mit dem Text von dieser Eingabe. Es gibt zu viel Code hier einfügen, so ist hier der vollständige Code: http://www.jsfiddle.net/timdown/cCAWC/3/

Extract:

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

Answer 2

nur eine Empfehlung:

es schwer ist, mit nativen Browser-Auswahl zu arbeiten + contenteditable + Griff Alle anderen Browser Aspekte + Auswahl und usw. von Grund auf neu speichern und wiederherstellen ..

I rangyhttps://code.google.com/p/rangy/wiki/SelectionSaveRestoreModuleempfehlen würde , die speziell gemacht, um alle harte Arbeit mit Auswahl für Sie

Prüfung der Dokumentation, ist es einfach zu bedienen;) hoffen, dass es Ihnen