Backspace ne supprime pas les balises html internes d'un contenteditable DIV dans Firefox

Question

J'ai créé un DIV avec l'attribut contenteditable = Les vrais enfants et annexés comme « span » et « a » avec des attributs contenteditable = false. Je voulais tester si le nœud entier est supprimé avec un seul backspace et à ma grande surprise Firefox ne pouvait pas supprimer les éléments. Aussi cela fonctionne comme prévu dans tous les principaux navigateurs de bureau, sauf Firefox. Des indices sur ce ou ce qui pourrait être la solution de contournement possible?

Nous avons trouvé le problème exact sur bugzilla .

Answer 1

D'accord! trouvé la solution ... son assez simple que ce que vous pensez. Je suis en fait html pour l'insertion de liens, donc l'utilisation <a> ici. La balise a <a> attribut défini sur contenteditable = false et son pas se supprimer avec un backspace. J'ai donc créé un niveau de <span> intérieur avec contenteditable = true pour firefox et qui a fait l'affaire.

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

Ceci est nécessaire dans Firefox uniquement. D'autres navigateurs traitent cela comme prévu avec la durée ayant un contenu contenteditable = false.