contenteditable

Description

L’attribut contenteditable permet à l’utilisateur de modifier directement le contenu d’un élément HTML. Avec true ou la valeur vide, le contenu est éditable avec mise en forme possible. Avec plaintext-only, seul du texte brut peut être collé (pas de HTML mis en forme).

Syntaxe

<div contenteditable="true">Ce texte est modifiable.</div>
<p contenteditable>Cliquez pour éditer.</p>

Exemples

Éditeur simple avec récupération du contenu :

<div id="editeur" contenteditable="true"
     style="border: 1px solid #ccc; padding: 0.5rem; min-height: 100px">
  Saisissez votre texte ici…
</div>

<script>
  const editeur = document.getElementById('editeur');
  editeur.addEventListener('input', () => {
    console.log(editeur.innerHTML); // contenu HTML
    console.log(editeur.textContent); // texte brut
  });
</script>

Zone de texte sans mise en forme :

<div contenteditable="plaintext-only"
     style="font-family: monospace; border: 1px solid #ccc; padding: 0.5rem">
  Seul du texte brut ici, pas de mise en forme collée.
</div>

Valeurs

Valeur	Description
true ou ""	Contenu éditable, mise en forme autorisée
false	Contenu non éditable (désactive l’héritage)
plaintext-only	Éditable en texte brut uniquement

Notes

Héritage : contenteditable s’hérite — les enfants d’un élément éditable le sont aussi, sauf si contenteditable="false" est explicitement posé.

Accessibilité : ajouter role="textbox" et aria-multiline="true" si nécessaire pour les lecteurs d’écran.

Formulaires : le contenu d’un contenteditable n’est pas automatiquement soumis dans un <form>. Pour envoyer les données, lire innerHTML ou textContent via JavaScript et le placer dans un <input type="hidden">.