html - react - contenteditable=false à l'intérieur contenteditable=le bloc true est encore modifiable dans IE8

react contenteditable (2)

J'ai le code HTML suivant pour vérifier que la span interne n'est pas modifiable. Cela fonctionne dans d'autres navigateurs mais pas dans IE8.

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="false">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

Voici un JSFiddle pour illustrer le point (utilisez IE8 pour le tester): http://jsfiddle.net/haxhia/uUKPA/3/ .

Comment puis-je m'assurer que IE8 le traite également correctement?

D'accord, j'ai déjà découvert la réponse, un peu comme la découverte de la pénicilline .

Vous voyez, en jouant avec ce code, j'ai par erreur défini contenteditable à true pour le span et le tour est joué! Ça a marché!

Donc, pour rendre un span non-contenteditable dans un div contenteditable, vous devez simplement définir son attribut contenteditable sur true !

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="true">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

Voici le fichier à démontrer (utilisez IE8 pour l’ouvrir): https://www.dropbox.com/s/2yc3rrtkji3rupr/contenteditableIE8.html .

Enfin, je n'ai pas posté la question pour obtenir des votes (même si cela ne fait pas de mal!), Mais comme la solution était tellement ridicule et que je ne l'ai pas trouvée ici, je pensais que quelqu'un pourrait trouver cette astuce.

Le problème avec contenteditable = "true" dans contenteditable = "true" (pour le rendre non modifiable) sur IE est que le double-clic sur l'élément interne le rend éditable

Solution

Grandparent tag as contenteditable true

Parent tag as contenteditable false

Child tag as contenteditable false

le contenu de la balise child ne sera pas modifiable à coup sûr

    <ul contenteditable="true">
        <li>By default, this content is editable via its 
        inherited parent elements value.</li>

    <li contenteditable="false" ><span contenteditable="false">This content is     
    <b>not</b> 
    editable for sure</span></li>
    </ul>

JSFiddle exemple