Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

TinyMCE HTML5 Media Plug-In 0.0.1

A plug-in for TinyMCE to manager the new HTML5 video tag

Project Description

HTML5 Media Plug-In for TinyMCE is a modification of MoxieCode's built in media plug-in to allow HTML5's new <video> and <source> tags. It's far from perfect and there are a few known drawback with this first release. The biggest issue is that the plug-in GUI dialog doesn't allow you to easily add/edit multiple <source> elements. It should be easy enough to integrate, but I wanted to release the code to make sure there are no other major issues before I continued.

The Setup Script

Since this is a modification of the existing media plug-in, setup is pretty much indentical, except for a couple of things. First, I renamed the plug-in to "mediahtml5" to avoid any potential conflicts with the existing plug-in. Secondly, TinyMCE is following HTML and XHTML guidelines when generating the HTML code, this means that the <source> tag is closed with </source>. This isn't that big of a deal, since modern browsers will still understand what to do, but your browser might throw a warning since the tag doesn't need to be closed in the HTML5 draft. (Not sure why they chose to do this?). I've addressed this by including a function that will force-clean the code on submit. You can choose to eliminate this if you choose.

Download the plug-in and place it within your TinyMCE plug-ins folder. And then add the following code to your initialization script. For basic installation, you could include something like this:

Example Setup
function doTinyMCECleanUp(frm, id) {
   var c = frm[id].value;
   // tinyMCE doesn't handle close the <source> tag properly
   // so we remove the closing </source>
   c = c.replace(/&nbsp;<\/source>/gim, '');
   c = c.replace(/<\/source>/gim, '');
   // comment the following out if 'html' not 'xhtml'
   c = c.replace(/<source([^>]*)>/gim, '<source $1 />');
   frm[id].value = c;
}
	
tinyMCE.init({

   mode : "textareas",
   theme : "advanced",
   plugins : "mediahtml5",
   doctype: "<!DOCTYPE html>",
   
   theme_advanced_buttons1 : "mediahtml5",
   theme_advanced_buttons1 : "mediahtml5,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true, setup : function(ed) { ed.onSubmit.add(function(ed, e) { doTinyMCECleanUp(e.target, ed.id); }); } });

If everything was installed properly, then you should see a new icon in your TinyMCE toolbar that looks like a little TV. (I wanted to avoid confusion with the existing media plug-in icon). It should look something like this:

TinyMCE HTML5 Media Plug-in

Conclusion

This is a BETA release, so I'm really looking to get feedback on functionality. I'm not really interested in feature request and things of that nature at this point (sorry). I would like to get a feel on how this works on all the various browsers. If you experience anything weird, be sure to let me know.