Sunday 24 Aug 2008

HTML compliant Flash in TinyMCE and WordPress

This plugin is no longer needed since the end of 2008 and the version 3.2.1 of TinyMCE, included in WordPress 2.7.1! :-)

wordpressPurists know that having a valid HTML code is very important not only to participate in the effort of standardization of the web, but also for referencing and compatibility with all browsers present or future.

The problem

Many CMS and blogs use the free WYSIWYG editor TinyMCE. WordPress from version 2.5 includes the version 3 of this editor which generate HTML code entirely valid except for Flash and videos (Real, WMV, Quicktime)!

I wrote some time ago an article showing the HTML compliant code to insert Flash. Of course it's tiresome to modify manually the code given by the sites (of videos sharing for example), especially to find it again in bulk if the article is republished. :-(

The solution

There was already a patch (independent of the publisher) to include Flash in a good way in TinyMCE version 2 (i.e. WordPress <2.3.3).

I did not find anything for version 3 (in WordPress >2.5), more complicated to change it myself.

Until a few days ago. I sought a solution more actively, because I installed TinyMCE in the administration panel of several sites I made for customers, and it is annoying to see its valid site ransacked by the insertion of Flash with the famous non-existent tag . :-/

I found this XHTML compliant media plugin which inserts correct code when you include a Flash or a video from our hard drive, but even also corrects the erroneous code you copy-paste, generally from a video sharing site. :-D

The installation

You just have to put the files contained in media.zip in your directory /tinymce/plugins/media/ (in WordPress it's located in /wp-includes/js/).

That's all. You can copy-paste a code totally wrong in HTML mode, when you get back in visual mode, TinyMCE would have correct it.


The result

Small test with the code from Dailymotion I already used as an example of video insertion in the previous article, with a incomplete <object>, a bad <embed> and several bad </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>

It's automatically transformed in:

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

Which is 100% valid. :-)


In short, dear bloggers replace the default plugin by this one on your WordPress and you will get a nice and clean code, without worrying about anything. 8-)


café Did this article help you? 
Buy me a coffee!

4 answers at “HTML compliant Flash in TinyMCE and WordPress”

  1. 1
    Lolotek (lolotek.free.fr) said:

    Hi,

    One year after my fix, TinyMce 3.2.1 >= is fixed to a valid HTML

    thx, to refere my website ;)
    best regard

  2. 2
    David (azure-dev.kizone.net) said:

    Oh great! :-D Thank you for the news.

    Your plugin was a good solution. ;-)

  3. 3
    authorized online casinos said:

    HTML is hypertext markup language which is used for designing.HTML is used to create web pages or we can say web documents.While we also use java script to add attractive to HTML pages.

  4. 4
    Custom T Shirts said:

    Thanks for this read mate. Well, this is my first visit to your blog! But I admire the precious time and effort you put into it, especially into interesting articles you share here!

Leave a comment (all comments are moderated, don't waste time with spam)

Azure Dev