Rangos de selección en webkit (Safari/Chrome)

Question

Estoy usando un iframe editable por contenido para crear un resaltador de sintaxis en JavaScript y una de las cosas más importantes es poder sangrar el código correctamente.

El siguiente código funciona como debería en Firefox:

// Create one indent character 
var range = window.getSelection().getRangeAt(0); 
var newTextNode = document.createTextNode(Language.tabChar); 
range.insertNode(newTextNode); 
range.setStartAfter(newTextNode); 

crea una pestaña de carbón y mueve el cursor a la derecha del carácter. En Chrome y Safari, se inserta un carácter pero el cursor no se moverá a la derecha de él.

Inspeccioné el objeto de rango tanto en Chrome como en Firefox, y luego noté que el objeto de rango de Firefox es mucho más rico que el de Chrome. No he podido encontrar ninguna especificación del objeto range en webkit.

¿Cómo puedo hacer que este código funcione tanto para webkit como para Firefox?

¡Gracias!

Answer 1

Ambos objetos Range de Firefox y WebKit cumplen completamente con DOM Range spec. Si Firefox tiene más propiedades, entonces serán las extensiones propias de Mozilla, pero generalmente la especificación proporciona todo lo que podrías necesitar.

De todos modos, el problema es que se necesita para volver a seleccionar el rango después alterarla:

// Create one indent character 
var sel = window.getSelection(); 
var range = sel.getRangeAt(0); 
var newTextNode = document.createTextNode(Language.tabChar); 
range.insertNode(newTextNode); 
range.setStartAfter(newTextNode); 
sel.removeAllRanges(); 
sel.addRange(range); 

Tenga en cuenta que esto no va a trabajar en las primeras versiones de Safari (antes de la versión 3, creo), debido a que su el objeto de selección no es compatible con getRangeAt. Hay una solución para esto que puedo proporcionar si la necesita.