contenteditable testo selezionato salva e ripristina

Question

Mi sono imbattuto in questo post che mostra 2 funzioni su come salvare e ripristinare il testo selezionato da un div contenteditable. Ho il div seguente impostato come contenteditable e la 2 funzione dell'altro post. Come usare queste funzioni per salvare e ripristinare il testo selezionato.

<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

Un utilizzo tipico sarebbe in mostra una sorta di widget o finestra di dialogo per accettare l'input da parte dell'utente (quindi potenzialmente distruggere la selezione originale) e ripristinare la selezione dopo quel widget è stato nascosto. In realtà usare le funzioni è abbastanza semplice; il più grande pericolo è cercare di salvare la selezione dopo che è già stata distrutta.

Ecco un semplice esempio. Visualizza un input di testo e sovrascrive la selezione nel modificabile <div> con il testo da quell'input. C'è troppo codice da incollare qui, quindi ecco il codice completo: http://www.jsfiddle.net/timdown/cCAWC/3/

Estratto:

<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

solo una raccomandazione:

è difficile lavorare con la selezione nativo del browser + contenteditable + manico tutti i diversi aspetti del browser + salvare e ripristinare la selezione ed ecc .. da zero

Lo raccomando longilineohttps://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
che appositamente fatto per rendere tutto il duro lavoro con la selezione per voi

controllo la documentazione, è facile da usare;) spero che vi aiuterà a