en este momento tengo algunos problemas para escribir una capa de abstracción para los navegadores basados en Mozilla y Webkit para usar el objeto de rango DOM (obtener y procesar selecciones de usuario).

También he tratado de echar un vistazo a marcos como Rangy, pero esto parece demasiado complejo para mi tarea (no tengo idea de dónde exactamente en el código para encontrar la información que necesito. Si alguien pudiera darme una pista, estaría ¡agradecido!)

Lo que quiero es simplemente esto:

recuperar la referencia al nodo de texto en el que comienza la selección y su desplazamiento recuperar la referencia al nodo de texto en el que termina la selección y su desplazamiento

Hasta ahora mi capa se ve así:

var SEL_ABSTR = {
get_selection: function(window_object) {
    return window_object.getSelection();
},
get_range: function(selection) {
    return (selection.getRangeAt) ? selection.getRangeAt(0) : selection.createRange();
},
get_range_info: function(range, div_ele) {
    var first_node, start_offset;
    var last_node, end_offset;

    if (range.startContainer == div_ele) {
        // selections affects the containing div
        first_node = div_ele.childNodes[0];
        last_node = first_node;
        start_offset = 0;
        end_offset = first_node.nodeValue.length;
    } else if (range.startOffset == range.startContainer.nodeValue.length && range.endOffset == 0) {
        // known bug in Firefox
        alert('firefox bug');
        first_node = range.startContainer.nextSibling.childNodes[0];
        last_node = first_node;
        start_offset = 0;
        end_offset = first_node.nodeValue.length;
    } else {
        first_node = range.startContainer;
        last_node = range.endContainer;
        start_offset = range.startOffset;
        end_offset = range.endOffset;
    }

    return {
        first_node: first_node,
        start_offset: start_offset,
        last_node: last_node,
        end_offset: end_offset,
        orig_diff: end_offset - start_offset
    };
},
};

He identificado dos errores de Mozilla por ahora:

A veces, cuando se selecciona todo el nodo de texto (si es el único) dentro del div que contiene, obtengo una referencia a este div en lugar de una referencia al nodo de texto. Ahora puedo manejarlo y devolver una referencia al hijo del div, que es el nodo de texto

A veces, obtengo una referencia al hermano anterior con desplazamiento == prevSibling.length y una referencia a nextSibling con desplazamiento == 0. Pero la referencia correcta estaría en el medio. También puedo manejar esto.

Entonces, ¿qué más hay para Mozilla? ¡Webkit funciona bien!

Uno debe asumir que el objeto de rango DOM es estándar (y no estoy hablando de IE, esta es otra tarea ...)

greets!

más detalles específicos aquí:

No fue una crítica a Rangy. Así que lo siento si sonó así. Me imagino que manejar estas API diferentes no es fácil per se.

Tiene razón, no era específico con respecto a la tarea que estoy tratando de cumplir. Mi estructura es bastante simple: tengo un div (con el atributo contenteditable = true) y el texto dentro de ese div (un nodo de texto al principio).

A partir de esta estructura, ahora es posible seleccionar texto con el mouse y agregarle una propiedad; Esta propiedad se expresa mediante un intervalo que abarca el texto seleccionado y una clase asignada a ese intervalo que representa la propiedad seleccionada. Ahora es posible seleccionar nuevamente texto y una propiedad. Si es el mismo texto y otra propiedad, se asignará otra clase a ese intervalo o se eliminará si la propiedad ya existe. Si se selecciona un texto que abarca varios tramos, se dividirán para expresar esa estructura (tal vez recuerde mi publicación de julio).

<div contenteditable="true">
hello I am 
<span class="red">text but I am also <span class="underline">underlined</span></span>
<span class="underline"> also without color</span>
</div>

El algoritmo funciona bien ahora para casos "simétricos": puedo construir una estructura compleja y luego deshacerla al revés. Funciona bien para Safari y Chrome. Ahora, por supuesto, tengo que seguir desarrollando el algoritmo.

Pero por ahora tengo problemas con Mozilla porque no entiendo el sistema para los objetos de rango DOM: startContainer, endContainer, startOffset, endOffset

En mi percepción con respecto a mi caso específico con un div que solo contiene nodos de texto y tramos, supongo:

que startContainer y endContainer siempre apuntan a un nodo de texto afectado por la selección del mouse (no hay espacios vacíos, siempre contienen otros espacios o un nodo de texto), marcando el comienzo y el final de toda la selecciónque startOffset y endOffset indican la posición de la selección dentro del nodo de texto al principio y al final

En el código publicado anteriormente, identifiqué dos casos en los que Mozilla actúa de manera diferente a webkit.

e modo que si supiera las reglas del rango DOM de Mozilla, podría integrar eso en mi capa para que el comportamiento sea el mismo para webkit y Mozilla.

Muchas gracias por su respuesta