dimanche 24 Août 2008

Flash avec du HTML valide dans TinyMCE et WordPress

Cette extension n'est plus nécessaire depuis fin 2008 et la version 3.2.1 de TinyMCE, incluse dans WordPress 2.7.1! :-)

wordpressLes 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 TinyMCE 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. :-D

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&amp;related=1"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="movie" value="http://www.dailymotion.com/swf/xqhfz&amp;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. 8-)


café Cet article vous a aidé? 
Offrez-moi un café!
Agrégateur informatique

9 réponses à “Flash avec du HTML valide dans TinyMCE et WordPress”

  1. 1
    1loup (1loup.net) a dit:

    Sur le principe, je trouve cela très bien alors j'ai voulu testé...
    Un 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...

  2. 2
    David (azur-dev.kizone.net) a dit:

    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. ;-)

  3. 3
    neo a dit:

    Salut... 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.

  4. 4
    David (azur-dev.kizone.net) a dit:

    Merci, 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. :-)

  5. 5
    Jérémy a dit:

    Bonjour,

    J'aimerai savoir si il vous serez possible de m'envoyer le .zip contenant le plugin video pour valider les vidéos dans tinycme par les validateurs du W3C.

    URL : http://sourceforge.net/tracker/index.php?func=detail&aid=2003314&group_id=103281&atid=738747
    media.zip => The archive is corrupt

    Merci d'avance,

    Cordialement

  6. 6
    David (azur-dev.kizone.net) a dit:

    Je l'ai rajouté en début d'article, il n'y en a plus besoin maintenant. Les dernières versions de TinyMCE l'intègrent.

    Et pour moi le .zip s'ouvre bien. :-|

  7. 7
    max a dit:

    Bonjour. Je tente d'utiliser le plugin media dans un TinyMCE local (intégré à une appli Windows) et mes tests montrent que le tag perd son attribut data et son param src (les deux choses indiquant l'URL de la vidéo) à charge rechargement dans l'éditeur (ou lorsque je passe en vue HTML et reviens en mode WYSIWYG). Est-ce normal ? Est-ce qu'il y a une astuce pour contourner ça ? A ce stade de mes réflexions, je me demande si je dois utiliser SWFObject : mais dans ce cas, quel plugin génèrera le bon code pour SWFObject (pas le plugin media) ? Ou dois-je complètement post-traiter le truc dans mon appli afin de changer le tag généré par le plugin media en ce qu'il faut pour être utilisable à la manière de SWFObject... Bon ! compliqué tout ça :-(

  8. 8
    David (azur-dev.kizone.net) a dit:

    J'ai remarqué que dans la dernière version de WordPress, TinyMCE se comporte bien plus mal avec le Flash. :-( Quel dommage.

    Je n'ai pas réessayé si le plugin media modifié fonctionnait avec les dernières versions. À tester...

  9. 9
    max a dit:

    Bon, j'irai donc essayer "XHTML Media Plugin V1.01" pour voir si ça change quelque chose... Affaire à suivre. Merci David.

Laisser un commentaire

Azur Dev