Les zones de saisie ne sont plus visibles sans CSS

[benoitdequick]

• Relevé par : SM
• Le : 30/04

Description du problème

Les champs texte riche n'étant plus des éléments textarea les zones de saisie ne sont plus visibles sans CSS.

Solution possible : utiliser une

Note : bien tester le fonctionnement de l’éditeur (mise en forme), avec ou sans CSS.

---

🔮 Pensez à lancer et/ou mettre à jour les tests end-to-end si nécessaire avant passage en prod.

[yaaax]

Idéalement :

• JS progressive enhancement : si pas de JS, remplacer par un textarea et faire la validation du contenu côté serveur
• CSS graceful degradation : utiliser l’astuce du SVG ?

Astuce du SVG + <foreignObject>

On peut englober la doc de l’éditeur par un élément foreignObject, lui même fils d’un élément SVG. Voir <foreignObject> - SVG: Scalable Vector Graphics | MDN.

Les SVG étant rendus même sans les styles CSS, ça passe.

Astuce du tableau

Autre astuce (peut-être plus simple) : utiliser un tableau de présentation avec une bordure déclarée avec border (et un style display: none pour la cacher lorsque les styles sont activés)

<table role="presenation" border="1" width="100%">
  <tr>
    <td>
      <div contenteditable="true">…</div>
    </td>
  </tr>
</table>