(4 vote(s), moy. : 4,00 sur 5)
Loading ...
Les navigateurs disposent de fonctionnalités permettant d’éditer du texte de façon enrichie grâce a des fonctionnalités Javascript nativement supportées. Tout le monde a par exemple croisé un jour l’éditeur TinyMCE, éditeur WYSIWYG de texte enrichi. Il est par exemple utilisé dans l’interface de rédaction de billet WordPress (permettant de mettre en gras, en couleurs, aligner, etc.).
Grâce à cette commande Javascript il est possible d’éditer un site web façon WYSIWYG directement dans votre navigateur :
javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0
Cliquez par exemple sur la commande pour éditer le blog, rafraichissez la page pour annuler l’édition.
Quelques explications
Cette commande fonctionne sur : Firefox, Opera et Internet Explorer (non testée sur Safari et Konqueror) car elle est en quelque sorte universelle.
Si vous utilisez Internet Explorer, cette commande là suffira :
javascript:document.body.contentEditable=’true’; void 0
Si vous utilisez Firefox, cette commande là suffira :
javascript:document.designMode=’on’; void 0
Si vous utilisez Opera, l’un ou l’autre des commandes mentionnées ci-dessus fonctionnera 
Comme quoi Opera ne se lance pas dans la féroce bataille des navigateurs, il préfère les prendre de haut en étant capable de comprendre les deux commandes 
Vous pouvez maintenant sélectionner des images, du texte de votre site préféré pour le défigurer… ou bien récupérer des éléments intéressants de façon sûre et rapide. Si vous avez du monde vous pouvez tenter de faire une suppression de l’image de Google en live devant vos amis qui resteront bouche bée. Pensez tout de même à leur dire que cette modification n’est active que localement car en arrivant chez eux ils vous prendront vite pour un c**.
Voici un exemple de modification (à deux balles) de Google :
Pour aller plus loin je vous conseille de lire le billet de Jérôme décorticant le fonctionnement d’un formulaire WYSIWYG.
Auteur : Mr Xhark
Fondateur du blog et passionné par les technologies je partage mes découvertes quotidiennement.
Déjà 12 commentaires
dit :
20 octobre 2008 à 18h58
Concrètement c’est bien beau.. mais difficilement applicable par la suite.. les pages étant bien souvent construite de plusieurs morceaux (include, contenu dynamique), l’édition globale est condamnée.
Je pense qu’aucun CMS n’utilisera un jour cette technique sur une page entière. A réserver donc pour des iframes (façon Tiny/FCK)
20 octobre 2008 à 19h01
C’est plus pour « le fun » qu’autre chose…
20 octobre 2008 à 23h00
Bonjour, merci pour ton lien vers mon tutos
Michael, un CMS est un tout permettant de pouvoir gerer le contenu de ton site, plus ou moins avancé.
Un WYSIWYG n’est qu’un outil permettant de pouvoir gerer une partie de ton CMS plus facilement et de facon plus rapide.
Avoue que c’est quand meme beaucoup plus simple de voir un résultat directement que de faire plusieurs previsu avant de voir ce que tu souhaite vraiment obtenir.
Donc non, on n’utilisera jamais ca pour une page entière et ce n’est pas son but.
dit :
20 octobre 2008 à 23h08
@jerome: « Avoue que c’est quand meme beaucoup plus simple de voir un résultat directement que de faire plusieurs previsu avant de voir ce que tu souhaite vraiment obtenir. »
Ai-je un jour dit le contraire?
21 octobre 2008 à 15h10
Je ne savais pas ça! C’est assez énorme! D’ailleurs, tu t’y connais bien en customisation de TinyMCE? J’ai eu à l’installer récemment sur cette page http://probuzzer.com/publier-votre-communique/ et j’aimerais bien l’améliorer un peu (par exemple agrandir le champ d’écriture et mettre les outils en haut et en ligne).
Sinon, ne serait-ce pas magnifique de pouvoir éditer son site comme ça, directement depuis la page en cours? Je crois en l’évolution vers une solution aussi souple, ce serait vraiment génial dla balle qui tue sa mère. Même si jamais au grand jamais je ne pourrai m’empêcher de mettre les doigts dans le code (les éditeurs WYSIWYG sont toujours plus ou moins bêtes et il faut des fois leur donner un coup de main)
21 octobre 2008 à 15h25
@Ben oui je me suis déjà pas mal servi de TinyMCE pour les news d’un de mes sites (Emulplus : http://bayimg.com/image/kalaeaabj.jpg) mais avec une vieille version de TinyMCE.
C’est relativement souple, pour ton cas il te suffit de régler les attributs rows= »10″ cols= »40″
21 octobre 2008 à 15h29
Merci Xhark! Je suis un peu étourdi des fois :-S
Pour le reste de la configuration de TinyMCE, c’est ici que j’ai trouvé les infos http://tinymce.moxiecode.com/examples/full.php
30 janvier 2009 à 19h07
hello
j’essaye de faire les manips mais je ne crois pas avoir tout compris
Alors, je tape dans un éditeur
document.body.contentEditable=’true’;
document.write(‘Ceci est une ligne ecrite en Javascript’);
je sauve dans un machin.js et j’indique à Opéra le chemin des plugins javascript, dans lequel je sauve machin.js. Mais au final: Rien, la page de google s’affiche comme avant
note: la seule ligne de code « document.write(‘Ceci est une ligne ecrite en Javascript</p » permet de remplacer la page de google par la seule ligne « Ceci est une ligne ecrite en Javascript », le code de machin.js écrase alors le code de la page de google
bref, je ne comprends pas bien comment tu réussis à insérer « powered par xshark » dans la page de google… Pourrais-tu exposer ton bout de code? ton code peut-il fonctionner en plugin JS pour Opéra ou faut-il vraiment l’insérer dans la page html?
30 janvier 2009 à 20h34
@artichaud : il faut mettre le code suivant dans la barre d’adresse :
31 janvier 2009 à 12h03
ok
moi ce que je voulais c’était faire un plugin pour Opera… Je remarque que des fois, ’Ceci est une ligne ecrite en Javascript’ s’affiche dans les pages, mais c’est erratique (par exemple dans la boite de réception de yahoo, avec contentEditable, l’encart publicitaire du haut est remplacé par le texte…)
28 mai 2011 à 13h24
Perso, je dois enlever les ‘ sinon ça marche pas…
javascript:document.body.contentEditable=true; document.designMode=on; void 0
dit :
28 octobre 2011 à 6h57
Bonjour,
Quelqu’un m’a filé le lien, mais on dirait que chez moi (Ubuntu Lucid + FF 7 + extensions Firebug et Web Developer), rien ne marche même quand je teste sur l’un de mes propres sites.
N’y aurait-il pas un conflit avec Firebug ou Web Developer ?