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

This article was posted by David
the Sunday 24 August 2008 at 17:05
in the category HTML & CSS, Software with tags: Blog, Discovery, Flash, Tools, Video. You can leave an answer, or backlink from your own website.