Estoy usando una excelente biblioteca Rangy. Y también estoy usando la función de Tim Down para insertar un nodo HTML en DIV contento:

function insertNodeAtCaret(node) {
    var sel = rangy.getSelection();
    if (sel.rangeCount) {
        var range = sel.getRangeAt(0);
        range.collapse(false);
        range.insertNode(node);
        range.collapseAfter(node);
        sel.setSingleRange(range);
    }
}

Ahora, esto funciona bien y como se esperaba en Chrome. Sin embargo, hay un comportamiento diferente en FF y Opera. En Chrome, el nodo HTML se inserta en contenteditable y el signo de intercalación permanece en este nodo HTML, por lo que cuando el usuario continúa escribiendo, todo lo que escribe está dentro del nodo HTML insertado.

En Opera y Firefox, el símbolo de intercalación se coloca fuera del nodo HTML insertado y cuando el usuario continúa escribiendo, los caracteres escritos NO están dentro del nodo HTML.

Mi código espera que funcione la "forma de Chrome". ¿Podrías ayudarme a lograr el mismo comportamiento en FF y Opera?

JsFiddle de trabajo para pruebas está aquí: http://jsfiddle.net/Er5DH/2/ (cuando presione la tecla "x" en contenteditable, inserta el elemento SPAN con color rojo. En Chrome, cuando continúa escribiendo, los caracteres son rojos, como se esperaba. Pero en FF y Opera, las siguientes letras escritas después de presionar la tecla "x" son negras, no querido)

Gracias por cualquier ayuda y sugerencias.

0
Frodik 26 may. 2012 a las 11:33

1 respuesta

La mejor respuesta

Podrías cambiar range.collapseAfter(node) a

range.selectNodeContents(node);
range.collapse(false);

Consulte http://jsfiddle.net/Er5DH/6/.

1
Tim Down 27 may. 2012 a las 22:35
Tim Down: Gracias por la respuesta, pero no resolvió el problema del todo. Cuando apliqué la solución propuesta, se rompió en Chrome y empezó a funcionar en FF. ¿Debo hacer la condición IF para filtrar FF / Opera y Chrome? Me gustaría tener una solución más robusta, ¿es posible, por favor? Último código utilizado: jsfiddle.net/Er5DH/5
 – 
Frodik
26 may. 2012 a las 16:05
1
@Frodik: Cometí un error tonto: debería ser collapse(false) en lugar de collapse(true). Actualicé mi respuesta.
 – 
Tim Down
27 may. 2012 a las 22:36