Objeto de selección que se comporta de forma extraña en el contenido de Chrome Elemento editable

Question

Estoy trabajando en un resaltador de sintaxis en tiempo real en javascript utilizando contenteditable. Al analizar contenido, extraigo el texto del div y uso patrones regex para darle un estilo adecuado. Luego configuro el innerHtml del div para el contenido analizado. Sin embargo, esto hace que el cursor desaparezca de la pantalla.

He creado esta función para restablecer el cursor, y funciona bien en Firefox. Pero en Chrome el cursor se mueve de una manera extraña que es semi-predecible. Por lo general, se establece en el primer carácter-char en el documento en lugar del lugar donde estaba justo antes del análisis.

El símbolo de intercalación que se almacena en la variable cc está en el lugar donde debería estar.

/** 
* Put cursor back to its original position after every parsing, and 
* insert whitespace to match indentation level of the line above this one. 
*/ 
findString : function() 
{ 
    cc = '\u2009'; // carret char 

    if (self.find(cc)) 
    { 
     var selection = window.getSelection(); 
     var range = selection.getRangeAt(0); 

     if (this.do_indent && this.indent_level.length > 0) 
     { 
      var newTextNode = document.createTextNode(this.indent_level); 
      range.insertNode(newTextNode); 
      range.setStartAfter(newTextNode); 

      this.do_indent = false; 
     } 

     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
} 

Algunos datos sobre llamar a estas funciones:

• Cuando elimine el comentario de código que cambia el contenido innerHtml el cursor se mueve por lo general al final del documento en su lugar.
• Si elimino el comentario de la persona que llama findString(), el análisis se hace pero el cursor desaparece hasta que vuelva a poner el foco en el div.
• Si descomiento ambas líneas, el div se está comportando como uno esperaría, excepto, por supuesto, para el análisis sintáctico.

¿Qué causa esta mala conducta en Chrome mientras funciona en Firefox?

EDIT: Más información

que estaba haciendo algún registro en window.getSelection() y se dio cuenta de que contenía información diferente cuando se comparan Chrome y Firefox. Lo que hizo que el script se comportara como debería, pero con un argumento que está mal.

Lo realmente extraño es que cuando inicio sesión window.getSelection() como la primera acción de la secuencia de comandos keyhandler se comporta de esta manera:

• sin ninguna modificación recibo el objeto "malo".
• Con un punto de interrupción establecido bajo la directiva console.log(), el script se detiene y el registro muestra un objeto "correcto", tal como yo lo quiero.

El registrador:

console.log(window.getSelection()); 
// Do keyhandling stuff... 

Answer 1

tratar de hacer una copia de la gama original y añadirlo a la selección en lugar de la gama original al final de la función, ya que el rango puede tener límites dinámicos , y terminarás configurando uno "equivocado".