Sans surprise, l'attribut contenteditable permet de préciser si le contenu de l'élément peut être édité ou non. Il s'agit d'une fonctionnalité répondant à la demande du web participatif : tout un chacun doit pouvoir éditer en ligne du contenu, le mettre en forme, sans posséder de grandes connaissances en HTML. L'objectif est de proposer des éditeurs WYSIWYG en ligne.
En revanche, la seule présence de l'attribut ne rajoute pas de barre de contrôle et de mise en forme (par exemple des boutons gras, insertion d'images, alignement de texte, etc). Il faut confier cette gestion à un script complémentaire, tel que CKEditor ou en concevoir un sur mesure afin d'injecter dans le DOM le code source souhaité.
Syntaxe
<element contenteditable="true|false">...</element>
Habituellement appliqué à un élément de type conteneur, l'attribut contenteditable le transforme en zone éditable, donnant le focus au curseur. Après modification, l'intérêt est de récupérer ce contenu grâce à la propriété innerHTML et de le transmettre au serveur par une quelconque méthode, par exemple en AJAX.
Valeurs possibles
-
true: indique que l'élément est éditable -
false: indique que l'élément n'est pas éditable (par défaut)
Démonstration
<p contenteditable="true">Le contenu est directement éditable par un visiteur</p>
Récupérer la valeur de l'élément édité
La propriété innerHTML est très pratique pour retrouver le contenu de l'élément HTML.
<script>
var contenu = document.getElementById('id-element').innerHTML;
</script>
Prise en charge
| Navigateurs | Versions |
|---|---|
 |
Internet Explorer 5.5+ |
 |
Firefox 3.5+ |
 |
Chrome 3+ |
 |
Safari 3.1+ |
 |
Opera 10+ |