Farcry Embed Quicktime with tinyMCE

I ran into an issue recently where tinyMCE would not allow me to embed a quicktime movie. If you look in the tinyMCE config in the Admin page you will see a list of acceptable HTML tags. embed is not one by default (on FC 3.0.2). I added embed to the acceptable tags but this would still not work. So I worked around it and here’s how:

I created a new InsertHTML snippet for embedding quicktime movies. For more information on InsertHTML snippets, see my blog post on that.

Here’s the code for the snippet:

<!--- @@displayname: Embed Quicktime Movie --->
<!--- @@author: Jake Churchill --->
<cfoutput>
<!-- startEmbed::<embed src="/files/#stObj.filename#" width="330" height="256" autoplay="true" controller="true" quality="high" bgcolor="##ffffff" pluginspage="http://www.apple.com/quicktime/download/" />::endEmbed -->
<!-- delete -->
<br><br>#stObj.filename# embedded successfully!<br>Note: if you wish to remove this file, you must use the "HTML" button and delete the source.<br>This text will not be displayed when the page is viewed.<br><Br>
<!-- end delete -->
</cfoutput>

You may notice a problem immediately with this…The embed tag is inside a comment tag and some additional unwanted text is actually added. The reason for this is that tinyMCE will ignore the comment tag but will still insert it. Because it’s ignored, nothing will be displayed to the user so the message is what actually gets inserted into the tinyMCE editor. You could add an image or whatever there too.

Now, we have to do some work on the display side of this…

In the display page, I added the following code:

<cfset stObj.Body = ReReplaceNoCase(stObj.Body, "<!-- delete -->.*<!-- end delete -->", "")>
<cfset stObj.Body = ReReplaceNoCase(stObj.Body, "<!-- startEmbed::", "")>
<cfset stObj.Body = ReReplaceNoCase(stObj.Body, "::endEmbed -->", "")>
<cfset stObj.Body = ReReplaceNoCase(stObj.Body, "xsrc=""", "src=""")>

#stObj.Body#

This will parse out the text that we didn’t want and get ride of the comment tags around the embed tag. Notice the “startEmbed::” before the embed and “::endEmbed” afterwards? This was done to give us a point of reference for the replace. The 4th replace changes xsrc to src in the embed tag. The version of tinyMCE that I was using (2.0.0 I think) changed src to xsrc for whatever reason so I had to change it back. You might not need to do that part, but just in case, there it is.