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!
Purists 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.
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&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>
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.






Hi,
One year after my fix, TinyMce 3.2.1 >= is fixed to a valid HTML
thx, to refere my website
Friday 9 January 2009 at 12:29best regard
Oh great!
Thank you for the news.
Your plugin was a good solution.
Friday 9 January 2009 at 13:02HTML 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.
Tuesday 15 December 2009 at 5:57Thanks 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!
Saturday 30 January 2010 at 3:21