(6 vote(s), 
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 depuis F12 > Console :
document.designMode='on';
Si vous utilisez Opera, l'une 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.
13 commentaires
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)
C'est plus pour "le fun" qu'autre chose... 😉
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.
@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? 🙂
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)
@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" 😉
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
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?
@artichaud : il faut mettre le code suivant dans la barre d'adresse :
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...)
Perso, je dois enlever les ' sinon ça marche pas...
javascript:document.body.contentEditable=true; document.designMode=on; void 0
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 ?
Salut, j'utilise Firefox et les codes ne fonctionne pas..