contenteditable div retroceso y eliminación de problemas de nodo de texto

Hay tantos problemas con los divs contentos y eliminar contenido editable html y / o no contenido dentro de divs editables.

Usando una respuesta del excelente Tim Down aquí: Cómo eliminar un elemento HTML dentro de un div con contenido de atributo ¿Editable?

Usando el código de Tim, se elimina todo el nodo de texto. Necesito que esto funcione como lo haría cualquier área de texto, eliminando carácter por carácter y simplemente asegurándome de que los elementos html también puedan retroceder.

Intenté lo siguiente

else if(node){ var index = node.length-1; if(index >= 0) node.deleteData(index,1); else this.removeChild(node); } 

Pero esto obviamente no va a funcionar correctamente. Si estoy al final del contenido, las cosas funcionan como se esperaba. Pero si coloco el cursor en cualquier otro lugar, todavía está borrando desde el final.

Estoy perdido en este punto, cualquier ayuda es muy apreciada

http://jsfiddle.net/mstefanko/DvhGd/1/

Después de desglosar cómo google utiliza divs contennteditable en su etiquetado de usuario de google plus, obtuve una solución mucho más razonable. Tal vez ayudará a alguien más a salir.

Google Post Widget

Después de agregar 1 etiqueta, ya puede ver muchas diferencias en el navegador html al navegador.

Google Chrome Source

En Google Chrome, se agrega un espacio con cada etiqueta. La etiqueta del botón se usa. Y solo se usa el contentedable = “solo texto claro” de chrome-only.

Google Chroem Source

Cuando respaldo el espacio en cromo, se agrega una etiqueta BR.

enter image description here

En Firefox, la etiqueta BR se agrega inmediatamente con la primera etiqueta. No se necesitan espacios Y se usa una etiqueta de entrada en lugar de la etiqueta de botón.

La etiqueta BR fue el avance más grande que tuve mientras investigaba esto. Antes de agregar esto, hubo un comportamiento peculiar con la eliminación de tags, así como problemas de enfoque.

enter image description here

En IE, se hicieron cambios más interesantes. Aquí se usa un lapso con contenteditable falso. Sin espacios o tags BR, pero un nodo de texto vacío.

Con todo eso, no tienes que copiar Google exactamente.

Las partes importantes:

Si está renderizando HTML, haga lo siguiente …

1. Chrome debería usar la etiqueta del botón

2. Firefox / IE debería usar la etiqueta de entrada

Para rango / selección, generalmente quiere tratar cosas como tags como un solo personaje. Puede construir esto en su rango / lógica de selección, pero el comportamiento de las tags de entrada / botón es mucho más consistente y mucho menos código.

IE se comporta mejor en IE7-8 usando un lapso. Solo desde el punto de vista de UI. Pero si no le importa si su sitio es bonito en las versiones anteriores de IE, la entrada tiene el comportamiento correcto en IE así como en Firefox.

3. Solo Chrome, utilice el atributo contenteditable = “solo texto simple” en su div editable.

De lo contrario, ocurren muchos problemas extraños no solo cuando un usuario intenta pegar texto enriquecido, sino que también cuando se eliminan elementos html a veces los estilos se pueden transferir al div, noté muchos problemas extraños con esto.

4. Si necesita establecer la posición de intercalación al final de div, establezca el final del rango antes de BR.

para Firefox:

 range.setEndBefore($(el).find('br')[0]);