Flash avec du HTML valide dans TinyMCE et Wordpress
Les puristes le savent, avoir un code HTML valide est très important, non seulement pour participer à l'effort de standardisation du web, mais aussi pour le référencement et la compatibilité avec tous les navigateurs présents ou futurs.
Le problème
Beaucoup de CMS et de blogs utilisent l'éditeur WYSIWYG gratuit TinyMCE. Wordpress à partir de 2.5 inclus la version 3 de cet éditeur qui fait du code HTML entièrement correct sauf pour le Flash et les vidéos (Real, WMV, Quicktime)!
J'ai écrit il y a quelques temps un article montrant le code HTML valide pour insérer du Flash. Bien sûr il est fastidieux de modifier à la main le code donné par les sites (de partage de vidéos par exemple), surtout pour le retrouver à nouveau en vrac si on réédite le billet. 
La solution
Il existait déjà un correctif (indépendant de l'éditeur) pour inclure du Flash de manière valide dans TinyMC version 2 (c'est à dire Wordpress <2.3.3).
Je n'avais rien trouvé pour la version 3 (dans Wordpress >2.5), beaucoup plus complexe à modifier manuellement.
Jusqu'à il y a quelques jours. J'ai cherché plus activement une solution, car j'ai installé TinyMCE dans le panneau d'administration de plusieurs sites que j'ai fait pour des clients et c'est embêtant de voir son site valide saccagé par l'insertion de Flash avec la fameuse balise inexistante <embed>. 
J'ai trouvé ce plugin media valide XHTML qui non seulement insère du code correct quand on inclus un Flash ou une vidéo depuis notre disque dur, mais corrige même également le code erroné qu'on copie-colle généralement d'un site de partage de vidéos. 
L'installation
Il suffit de mettre les fichiers contenu dans media.zip dans votre dossier /tinymce/plugins/media/ (dans Wordpress c'est dans /wp-includes/js/).
C'est tout. Vous pouvez copier-coller un code tout faux en mode HTML, quand vous repassez au mode visuel, TinyMCE l'aura corrigé.
Le résultat
Petit essai avec le code de Dailymotion qui m'avait servi d'exemple d'insertion de vidéo l'autre fois, avec <object> incomplet, le vilain <embed> et des vilains </param>:
<object width="220" height="129"><param name="movie" value="http://www.dailymotion.com/swf/xqhfz&related=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.dailymotion.com/swf/xqhfz&related=1" type="application/x-shockwave-flash" width="420" height="357" allowFullScreen="true" allowScriptAccess="always"></embed></object>
Il est automatiquement transformé en:
<object width="220" height="129" type="application/x-shockwave-flash" data="http://www.dailymotion.com/swf/xqhfz&related=1"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="movie" value="http://www.dailymotion.com/swf/xqhfz&related=1" /></object>
Qui est 100% valide. 
En résumé, amis blogueurs remplacez le plugin d'origine par celui-ci sur vos Wordpress et vous aurez un joli code tout propre, sans vous soucier de rien. 
Cet article a été posté par David
le Dimanche 24 août 2008 à 16:21
dans la catégorie HTML & CSS, Logiciel avec les mots clés: Blog, Découverte, Flash, Outils, Vidéo. Vous pouvez laisser une réponse, ou rétrolien depuis votre propre site.
Sur le principe, je trouve cela très bien alors j'ai voulu testé...
Dimanche 24 août 2008 à 21:31Un GROS bémol : il ne "corrige" pas, j'ai plutôt l'impression qu'il remplace par des modèles prédéfinis qui eux sont valides. Est-ce que tu vois la nuance ?
Hors, comme je suis soucieux des personnes aveugles et de mon référencement (et que je souhaite donner une indication aux personnes n'ayant pas le plugin flash d'installé), j'insère toujours un texte alternatif, de façon valide bien entendu. Et que se passe-t-il ? Il supprime ce texte alternatif ! Ce n'est donc pas encore LA solution, même si on s'en rapproche...
En effet, ce n'est parfait, mais au moins le code inséré est correct.
Par rapport à la version de base, tu n'as que le texte alternatif à rajouter au lieu de nombreuses corrections de code!
Si tu t'y connais en Javascript, la modification de ce nouveau plugin pour le rendre nickel sera déjà plus facile. Je pense même que si tu écris à l'auteur jknipfel, il pourra te donner un coup de main.
Dimanche 24 août 2008 à 21:43Salut... Je sais pas comment te remercier! T'es un génie je t'aime trop. Je suis en train de développer mon propre blog en php sans passer par wordpress ou autre, et je me suis arraché les cheveux à trouver une solution sur le web que je trouvais pas. J'ai fini par coder une fonction php qui nettoyait le code avant l'insertion dans la base, mais c'était pas fiable... Et enfin je suis tombé sur ton blog qui m'a renvoyé sur le plugin! Juste génial... Bon une petite précision, pour les video youtube, aucune modif à faire, par contre pour les videos dailymotion, l'adresse donnée (permalien) contient /video/ il faut donc changer ca en /swf/ Mais c'est seulement si on passe par le bouton "media" de tinyMce car si on insère directement le lecteur exportable il n'y a aucun problème (mais c'est quand même plus classe de passer par le bouton je trouve). Une petite fonction php et c'est réglé... Pour ceux que ça intéresse :
function dailymotion($charset) {
$search_video = eregi('(<object(.*))', $charset, $video);
if ($search_video) {
$newcharset = eregi_replace('/video/', '/swf/', $video[1]);
$newcharset = eregi_replace('<object', '<object class="videos"', $video[1]);
}
return ''.$newcharset.'';
}
Voilà, et pis à mon tour de te donné un petit lien utile pour l'anti spam des commentaires... Un truc tout con à mettre en place qui évitera la question mathématique pour poster son com : http://www.sens-interdit.fr/2007/03/05/200-un-antispam-qui-fonctionne
En espérant que ça te sera utile.
Dimanche 12 octobre 2008 à 0:15Merci, mais ce n'est pas moi le génie, c'est celui qui a écrit l'extension.
Je ne comprend pas pourquoi les auteurs de TinyMCE ne l'inclue pas dans la version officielle.
Pour l'anti-spam, en effet ça peut remplacer un captcha sans ennuyer les visiteurs. Je vais tester ça.
Dimanche 12 octobre 2008 à 1:52