¿Cómo obtener la posición de currículum dentro de div satisfactoria con elementos secundarios html?

Question

Estoy trabajando con un div satisfactorio que tendrá la opción de tener elementos html en línea como etiquetas en el flujo de texto.

En ciertos puntos necesito tomar la posición de intercalación pero he encontrado que con el código de ejemplo la posición devuelta es incorrecta si la intercalación está detrás de un elemento secundario html.

Necesito una solución de navegador cruzado que me permita almacenar la posición del cursor para que se pueda restaurar una fracción de segundo más tarde, incluso con la presencia de elementos html en el flujo de texto.

Ejemplo: http://jsfiddle.net/wPYMR/2/

Answer 1

He publicado una pregunta acerca de una biblioteca gama de navegadores/selección y encontró algunas cosas grandes que yo era capaz de resolver todas mis necesidades con.

Aquí es mi mensaje: Cross Browser Selection Range Library?

Lo que me ayudó mejor fue Tim Down rangy.

Answer 2

he respondido a una pregunta muy similar aquí: Editing Iframe Content in IE - problem in maintaining text selection

Aquí hay una versión ligeramente simplificada de esa respuesta:

Si no va a modificar el contenido del elemento contenteditable continuación, las siguientes funciones hará . Llame al saveSelection() antes de hacer lo que necesite hacer y restoreSelection() después. Si está cambiando el contenido, le sugiero que use mi Rangy biblioteca de save/restore selection module.

var saveSelection, restoreSelection; 
if (window.getSelection) { 
    // IE 9 and non-IE 
    saveSelection = function() { 
     var sel = window.getSelection(), ranges = []; 
     if (sel.rangeCount) { 
      for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
       ranges.push(sel.getRangeAt(i)); 
      } 
     } 
     return ranges; 
    }; 

    restoreSelection = function(savedSelection) { 
     var sel = window.getSelection(); 
     sel.removeAllRanges(); 
     for (var i = 0, len = savedSelection.length; i < len; ++i) { 
      sel.addRange(savedSelection[i]); 
     } 
    }; 
} else if (document.selection && document.selection.createRange) { 
    // IE <= 8 
    saveSelection = function() { 
     var sel = document.selection; 
     return (sel.type != "None") ? sel.createRange() : null; 
    }; 

    restoreSelection = function(savedSelection) { 
     if (savedSelection) { 
      savedSelection.select(); 
     } 
    }; 
} 

Ejemplo del uso:

var sel = saveSelection(); 
// Do stuff here 
restoreSelection(sel);