javascript - contenteditable div retroceso y eliminación de problemas de nodo de texto
html range (1)
Hay tantos problemas con divs contenteditable 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 un atributo contentEditable?
Usando el código de Tim, el nodo de texto completo se borra. Necesito que esto funcione como cualquier área de texto, eliminando carácter por carácter y asegurándome de que los elementos html también puedan ser copiados.
Probé 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 espera. Pero si coloco el cursor en otro lugar, todavía se está borrando del final.
Estoy perdido en este punto, cualquier ayuda es muy apreciada.
Después de desglosar cómo Google utiliza divs contenteditable en sus etiquetas de usuario de google plus, encontré una solución mucho más razonable. Tal vez ayude a alguien más.
Después de agregar 1 etiqueta, ya puedes ver muchas diferencias en el navegador html al navegador.
En Google Chrome, se agrega un espacio con cada etiqueta. Se utiliza la etiqueta del botón. Y se usa el Chrome-only contenteditable = "plaintext-only".
Cuando retrocedo el espacio en Chrome, se agrega una etiqueta BR.
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 mayor avance que tuve al investigar esto. Antes de agregar esto, hubo una gran cantidad de comportamientos extraños con la eliminación de etiquetas, así como problemas de enfoque.
En IE, se hicieron más cambios interesantes. Aquí se utiliza un lapso con contenteditable false para las etiquetas. Sin espacios ni etiquetas BR, sino 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 debe usar la etiqueta de entrada
Para el rango / selección, por lo general, desea tratar las cosas como etiquetas como un solo carácter. Puede incluir esto en su rango / lógica de selección, pero el comportamiento de las etiquetas de entrada / botón es mucho más consistente y mucho menos código.
IE se comporta mejor en IE7-8 usando un span. Sólo desde el punto de vista de la interfaz de usuario. Pero si no te importa si tu sitio es bonito en versiones antiguas de IE, la entrada tiene el comportamiento correcto en IE y también en Firefox.
3. Solo para Chrome, use el atributo contenteditable = "plaintext-only" en su div editable.
De lo contrario, suceden muchos problemas extraños, no solo cuando un usuario intenta pegar texto enriquecido, sino también cuando se eliminan elementos html. A veces, los estilos pueden transferirse a la división. Noté muchos problemas extraños con esto.
4. Si necesita establecer la posición de intercalación al final del div, establezca el final del rango antes de la BR.
para FireFox:
range.setEndBefore($(el).find(''br'')[0]);