contenteditable texto seleccionado guardar y restaurar

Question

Me encontré con esta publicación que muestra 2 funciones sobre cómo guardar y restaurar el texto seleccionado de un div entretenido. Tengo el div establecido a continuación como contentible y la función 2 de la otra publicación. Cómo utilizo estas funciones para guardar y restaurar el texto seleccionado.

<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 uso típico sería la representación de algunas tipo de control o de diálogo para aceptar la entrada del usuario (por tanto, potencialmente destruir la selección original) y la restauración de la selección después de ese widget se ha ocultado. En realidad, usar las funciones es bastante simple; el mayor peligro es tratar de salvar la selección una vez que ya ha sido destruida.

Aquí hay un ejemplo simple. Muestra una entrada de texto y sobrescribe la selección en el <div> editable con el texto de esa entrada. Hay demasiado código para pegar aquí, así que aquí está el código completo: http://www.jsfiddle.net/timdown/cCAWC/3/

Extracto:

<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

sólo una recomendación:

es difícil trabajar con la selección navegador nativo + contenteditable + manejar todos los diferentes aspectos del navegador + guardar y restaurar la selección y etc .. desde cero

lo recomiendo alto y delgadohttps://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
que especialmente hecho para hacer todo el trabajo duro con la selección para usted

verificación de la documentación, que es fácil de usar;) esperemos que le ayudará a