Zapisywanie i przywracanie zawartości zaznaczone jednym tekstem

Question

Natknąłem się na ten wpis, który pokazuje 2 funkcje zapisywania i przywracania zaznaczonego tekstu z elementu dającego się dostosować. Mam poniżej div ustawiony jako contenteditable i 2 funkcję z drugiego postu. Jak korzystać z tych funkcji, aby zapisać i przywrócić zaznaczony tekst.

<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

Typowym zastosowaniem byłoby wyświetlanie jakiś widget lub okna, aby zaakceptować wejście od użytkownika (w ten sposób potencjalnie niszcząc oryginalny wybór) i przywrócenie wybór po tym widget został ukryty. Faktycznie korzystanie z funkcji jest dość proste; największym niebezpieczeństwem jest próba zapisania selekcji po jej zniszczeniu.

Oto prosty przykład. Wyświetla tekst wprowadzony i zastępuje zaznaczenie w edytowalnym <div> tekstem z tego wejścia. Nie ma zbyt dużo kod wkleić tu, więc tutaj jest pełny kod: 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

tylko jedno zalecenie:

trudno jest pracować z wyboru przeglądarki rodzimej + contenteditable + uchwyt wszystkie różne aspekty browser + uratować i przywrócić wybór i etc od zera ..

polecam smukłyhttps://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
że specjalnie zrobione, aby wszystkie ciężkiej pracy z wyboru dla was

sprawdzić docs, jest łatwy w użyciu;) nadzieję, że to pomoże Ci