Retroceso no elimina las etiquetas html internas de un contenteditable DIV en Firefox

Question

He creado un DIV con atributo contenteditable = verdadero y anexado como "span" y "a" con atributos contenteditable = falso. Quería probar si el nodo completo se elimina con un solo retroceso y para mi sorpresa Firefox no pudo eliminar los elementos. También esto funciona como se espera en todos los principales navegadores de escritorio excepto Firefox. ¿Alguna pista sobre esto o lo que podría ser la posible solución?

Encontró el problema exacto en bugzilla here.

Answer 1

¡Bien! encontró la solución ... es bastante simple de lo que pensaría. De hecho, estoy insertando html para enlaces, así que usando <a> aquí. La etiqueta <a> tiene el atributo establecido en contenteditable = false y no se elimina con un retroceso. Así que he creado un nivel interno <span> con contenteditable = true para firefox y eso fue lo que hizo.

<div contentEditable="true"> 
    <a href="your/url/path" contentEditable="false"> 
    <span contentEditable="true">link here</span> 
    </a> 
</div> 

Esto solo es necesario en Firefox. Otros navegadores tratan esto como se espera con el lapso de contenido contentivo = falso.