html-can-not-do-that

C'est quoi « contenteditable » ? C'est un attribut HTML, comme le « href » (dans les liens) ou le « src », « alt » dans les images.

Cet attribut permet de rendre le contenu éditable par l'utilisateur. Ce n'est pas un formulaire, donc les données ne sont pas transmissibles au serveur, mais un <div> avec cet attribut pourra par exemple être édité dans le navigateur.

À quoi ça peut bien servir ?
Je sais pas trop à quoi ça sert « officiellement ». Pour le moment, j'y ai trouvé deux usages :

L’orthographe

On ne le dirait pas, mais je vérifie quand même mes pages au correcteur orthographique intégré dans mon éditeur de texte. Malheureusement, trouver les fautes dans du code HTML brut c'est bien moins facile que dans la page web finale (à cause des éléments de code qui sont eux-mêmes soulignés par le correcteur).
Ce que je fais maintenant : je place l'attribut « contenteditable » sur le body de la page (temporairement). Vu que le contenu est éditable, les mots inconnus sont soulignés par le correcteur de mon navigateur (comme dans les formulaires).

exemple-orthographe

Magnifique non ? Ensuite, il faut corriger dans le fichier source (pas la page) et ça ne fait toujours que l'orthographe (pas la grammaire), mais c'est plus pratique…

Intégrer un éditeur CSS dans la page

En HTML5, on peut placer un <style> en plein milieu du code (plus uniquement dans l'entête). On peut aussi afficher ce <style> comme une boîte, et on peut aussi le rendre éditable.
Or, comme il s'agit toujours d'un élément <style>, le texte (du CSS) qui s'y trouve est pris en compte par le navigateur. En modifiant son contenu, on peut donc coder du CSS directement dans la page, et le voir s'appliquer en direct.
Plus besoin de taper du code, de changer de fenêtre, de recharger la page, de revenir à l'éditeur CSS et ainsi de suite !

C'est tout simplement fabuleux (attention toutefois : le code que vous tapez n'est pas enregistré : il ne faut pas oublier de le copier-coller dans le vrai fichier CSS ensuite).

En prime je vous donne un exemple :
Ceci sera le code qui sera stylisé par le CSS qui se trouve ci-dessous, car il porte d'ID « #ceci-est-editable »
Le bloc noir ci-dessous est éditable : allez-y ! Ajoutez tout le CSS que vous voulez, même pour tout le reste de la page : #entete (mon entête) ou #post (pour un article par exemple). Si vous faites une connerie, rien n'est conservé et il suffit de rafraîchir la page.
Si vous ne connaissez pas le CSS, vous pouvez essayer de changer le « white » en « red » ou « yellow » pour changer la couleur du texte en rouge puis en jaune :

Pourquoi ça va m'aider ce truc ?
Parce qu'avec un attribut HTML5 et quelques lignes de CSS, je transforme mon navigateur en éditeur WYSIWYG qui applique les changements en temps réel, sans requêtes serveur pour rafraîchir la page, c'est bien plus rapide !

Plus besoin de 3 tonnes de AJAX gourmand en ressources serveur et client ainsi qu'en bande passante : une seule ligne de JS suffirait si l'on veut sauver le code (copier le code tapé dans un formulaire, et envoyer le formulaire).

image (qui va très bien avec l'article pour une fois) de Noah Sussman

26 commentaires

gravatar
Julien a dit :

Effectivement, ça peut être sympa pour tester une modification partielle ou entière de son css en temps réel en ne bousillant pas son css.

Je pense que ça peut avoir un intérêt pour les webmasters.

Et si on est parono, il suffit d'activer cette ligne html seulement quand on est connecté en administrateur, ce qui est facilement faisable.

Merci pour l'astuce, ça va mettre utile.

Il serait intéressant de rajouter cette découverte sur le thème par défaut de blogotext, sa permettrait de faire des tests.

gravatar
Le Hollandais Volant a dit :

Je comptes faire une page en HTML, disponible à tous et au téléchargement : de la même façon qu'on édite le CSS, on pourra éditer le HTML également.

gravatar
Nigel a dit :

[troll]Et si on édite la balise "contenteditable"?? :D [troll]

Je trouve sa super pratique comme système, surtout quand on est obliger de travailler sur un serveur distant, upload+rechargement de la page prend beaucoup de temps.

gravatar
TD a dit :

HTML et CSS, c'est plus fort que toi.

gravatar
Le Hollandais Volant a dit :

@Nigel : ton troll :D… J'ai pas osé le dire dans l'article : qu'il falait pas éditer la balise <style>, genre en supprimant le "display:block".

gravatar
®om a dit :

Avec un peu de JavaScript en plus, ça permettra de simplifier l'édition des Wikis ;-)

gravatar
Julien a dit :

@®om :

ça serait pas mal en effet...

J'imagine un wiki modifiable en temps réel, ça serait grandiose

gravatar
Nigel a dit :

Ou sur un forum, plus de bouton aperçu... Les gars, on vient de révolutionner internet là :D

gravatar
Baronsed a dit :

@Timo : chez moi, ça ne marche que pour #ceci-est-editable ; j'ai testé avec #post et #entete.
J'ignore ce que tu as changé par ailleurs, mais je n'ai plus
- de clic milieu
- de défilement fluide de la page
- de remontée jusqu'en haut (avec la touche home)
sur ton site :-s

gravatar
Nigel a dit :

@Baronsed :

Pour les choses qui ne marchent plus chez toi, je crois que Timo s'est essayer à une version mobile.

Ensuite chez moi (FF 3.6 et Fedora 14, j'ai pas encore eu le temps de tester avec mon FF 11 sous ubuntu :p ), je peut édité le CSS de toute la page, sa permet de faire des trucs rigolos sans Web Developer genre passer toutes les div en background: pink, sa m'a fait un hollandaisvollant version My Little Poney, c'est magique *_*

gravatar
Aris a dit :

@®om : C'est vrai que les Wiki proposent des éditeurs compliqués. On dirait du code des années 90.

Pour ce qui est du contenteditable, ça existe depuis belle lurette... sur IE. IE6 le gère par exemple. Mais pas en HTML, en Javascript sur un Iframe :
document.getElement("iframe").contentWindow.document.body.contentEditable=true;

Ca existe aussi sur les autres navigateurs avec :
document.getElement("iframe").contentWindow.document.designMode='on'

Mais c'est plus propre en HTML, c'est sûr, car en JS, on se heurte à la barrière des différences entre navigateurs.

gravatar
Guenhwyvar a dit :

C'est sympa, mais honnêtement, je vois pas bien à quoi ça peut servir… Même pour un webmaster, c'est quand même d'un intérêt assez limité…

gravatar
Julien a dit :

@Guenhwyvar :

Combiner à du JavaScript, ça peut permettre d’éditer en temps réel par exemple ces fautes sur ces articles (si tu place les div avant et aprés les div pour l'article), en évitant d'actualiser la page toutes les 5 minutes ou d'éviter de faire des va et vient entre l'administration et les articles.

CA peut aussi avoir une utilité pour les bidouilleurs par exemple modifier son compte html ou son css directement via une ligne que l'administrateur ou l'utilisateur aurait, ainsi de modifier sans boussiler tous.

Au final, ça peut avoir une grande utilité pour un blogueur.

J'attends actuellement une évolution de blogotext pour migrer mes articles, j'en profiterais à ce moment là pour rajouter ça dans mon thème.

gravatar
alz a dit :

Attention avec toutes vos révolutions, n'oublier pas de déposer des brevets xD

gravatar
Le Hollandais Volant a dit :

@Baronsed : étrange ce qui t'arrives là.

Je n'ai rien fait qui empêche tout cela. Je sais que j'ai eu un soucis avec la version mobile du site, peut-être résolu, je sais pas (je suis pas en mesure de corriger maintenant en tout cas), on vera ce week-end).


La version mobile ? Elle est intégrée directement dans le thème CSS maintenant : média query permet ça : adapter un style en fonction de la taille de la fenêtre.

gravatar
Fred a dit :

Effectivement c'est très sympa, mais pour intégrer des vidéos, des images (et même pour mettre en forme le texte ?) ça doit être un peu plus technique.
http://createjs.org/ utilise cet attribut je pense.

gravatar
Nigel a dit :

@Le Hollandais Volant : Bah a un moment le site s'est affiché en version mobile chez moi et pendant une petite heure puis retour à la normal, j'ai pensée que tu faisait des tests :p

gravatar
Le Hollandais Volant a dit :

@Nigel : idem, mais c'est la mise en cache : chaque demi-heure le cache est remis à neuf. Il semble que le visiteur qui était le premier à ce moment là demandait la page mobile, donc c'est la page mobile qui était mise en cache...

Aucun problème, normalement c'est résolu.

gravatar
Silversthem a dit :

Ce truc est tout simplement super hyper utile, mais voilà, si tu met un bbcode, tu fais comment (pour les smiley) ? Mais sinon ce truc peut être pratique mais pas sans JS :( .

gravatar
Nek a dit :

Bien ta grotte ?

contenteditable fait parti des normes depuis bien longtemps ! IE6 ne le supporte qu'à moitié, au même titre que ses prédécesseurs. Bref rien de nouveau, ça ne fait pas parti de HTML5.

Firefox, chrome, et les autres le supportent depuis très longtemps.

Je suis déçu de voir qu'en venant - de nouveau - sur ce site par hasard je tombe de nouveau sur un article moisi.

gravatar
Le Hollandais Volant a dit :

hm.
Si ça existe depuis si longtemps dans les spec HTMLn: pourquoi personne ne l'utilise ? ou n'y trouve une utilité ?

Ma grotte HTML5 va très bien :D.
C'est bien beau d'être hors de la grotte, mais s'il vous faut Jquery et Flash pour commencer à construire des pages web, pas étonnant que le web est aussi lent aujourd'hui.

gravatar
Nek a dit :

Personnellement j'utilise JQuery mais je ne l'ai pas attendu pour faire des effets sur le net, bref rien à voir. Et je ne parlais pas d'une grotte HTML5 puisque ça n'en est pas.

Sinon pour le contenteditable, comme je l'ai dit c'est mal (très mal) supporté par IE, ce n'est dispo que sur les iframe ! Donc on l'utilisait sur ce qu'on pouvait, à savoir les iframes. Et franchement les wysiwyg sur ne sont pas très récent, ça doit faire 10ans qu'on en voit sur le net.

Bonne fin de journée.

gravatar
Baronsed a dit :

Début et fin de page sont revenus, défilement doux aussi.
Manque plus que le clic droit.
firefox 3.6.24 sur xubuntu 10.04

gravatar
qwerty a dit :


Parce qu'avec un attribut HTML5 et quelques lignes de CSS, je transforme mon navigateur en éditeur WYSIWYG qui applique les changements en temps réel, sans requêtes serveur pour rafraîchir la page, c'est bien plus rapide !


Une application dans blogo ?

Les commentaires sont fermés pour cet article