Adding Flash Embed support in TinyMCE Editor
By Akbar • January 28th, 2008
Today when working on a project, which uses the TinyMCE editor to HTML editing, I needed to add support for Flash embedding. When I tried to add the OBJECT or EMBED tags in the HTML source window, these were auto removed by the TinyMCE. Hmm… ‘there must be a simple of doing it’, I thought. Sure enough, I searched the web and there was an easy way to achieve the goal. So, all you need to do is just set the “extended_valid_elements” attribute with correct tags.
Here is how I did that:
tinyMCE.init({
mode : “textareas”,
editor_selector:“mceEditor”,
theme : “advanced”,
theme_advanced_buttons1 : “bold,italic,underline,strikethrough,|,forecolor,backcolor,|,link,unlink,image,code”,
theme_advanced_buttons2 : “”,theme_advanced_buttons3 : “”,theme_advanced_buttons4 : “”,
theme_advanced_resizing : true, tab_focus : “:prev,:next”,
extended_valid_elements : “object[width|height|classid|codebase],param[name|value],embed[src|type|width|height|flashvars|wmode]”
});
Job done. You can now insert the FLASH stuff like movies from youtube.com easily on your site.
Tags: Embed, Flash, JavaScript, Object, TinyMCE
This entry was posted
on Monday, January 28th, 2008 at 10:11 pm and is filed under JavaScript.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Hi,
you need to include “media” plugin and then set “media_strict” to false.
Regards
Anu
it doesn’t work (with the last version). sorry..
Thanks for this post. I use drupal and this helped me with a patch posted here:
http://drupal.org/node/325491
For those above where this doesn’t work – it seems there are several versions of html that you can use to embed youtube videos, so check what you’re using, you may need to add some other attributes to allow. I needed to allow ‘data’ and ‘type’ for the object tag.
Hmm… Strange. Try doing thes:
1. First try to move the extended_valid_elements, after the valid_elements in the initialization.
2. Second try to remove the valid_elements elements al-together.
3. Use the initialization code which I posted in the first message.
See if any of these works.
Regards,
Akbar
Thanks.
It’s strange, but it seems to work when I remove valid_elements and extended_valid_elements from init altogether.
Yigi,
I have checked this and it looks good to me. The only thing you might want to verify check is that sometime it might take long (around 5-10 seconds) before the actual YouTube video appears. I am not sure, why there is such random delay sometime.
See if this is the issue with you? Another thing you can do is that once you have saved the HTML, try to reload the HTML and copy and paste it into another simpel HTML file. See if that works?
Regards,
Akbar
I am having a similar problem. I am using the media plugin. If I also add the flash plugin, I get an alert telling me that it’s deprecated and can’t be used together with media.
The problem is that the youtube video doesn’t get embedded in the page — I only see the spacer of the correct size. Though the media plugin seems to work fine.
Here’s my init (with your extended_valid_elements):
mode : “textareas”,
theme : “advanced”,
editor_selector : “mceEditor”,
plugins : “imagemanager,media”,
theme_advanced_buttons1 : “bold,italic,underline,bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,insertimage”,
theme_advanced_buttons1_add : “media”,
theme_advanced_buttons2 : “”,
theme_advanced_buttons3 : “”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
content_css : “‘ .$this->webroot. ‘css/wyciwyg.css”,
height : “.$height.”,
relative_urls : false,
remove_script_host : true,
document_base_url : “‘.FULL_BASE_URL.’/”,
extended_valid_elements : “object[width|height|classid|codebase],param[name|value],embed[src|type|width|height|flashvars|wmode]”,
valid_elements : “”
+”a[href|target],”
+”b,”
+”br,”
+”em,”
+”img[src|id|width|height|align|hspace|vspace],”
+”i,”
+”ins,”
+”li,”
+”p[align|class],”
+”span[class],”
+”strong,”
+”u,”
+”ul”
Melvin,
Yes, if you have the HTML source for the flash object, then ideal method would be using the HTML button.
You can also show the special Flash toolbar button. This may help user easily paste the flash based objects on the page.
After you enable this, how do you add in the code? The HTML button?
Sumesh,
Are you getting any JavaScript error?
Also, check the solution proposed by Mike above by adding and enabling the flash.
I am using Tinymce 2.0.6.1 version but it didn’t work for me.Can you please help??
Hi,
Don’t worry about putting object, param and embed tags to the extended_valid_elements property. I’ve tried it and it does not work for me too.
To get it working make sure you have flash in the plugins property.
tinyMCE.init({
mode : “textareas”,
editor_selector : “wysiwygedit”,
plugins : “flash,print,paste”,
…..
});
cheers,
Mike
Anu,
For this add the allowed tags and attributes in the extended_valid_elements property. Please check my sample in above post on how to configure this property.
Maria,
Exactly what version of the TinyMCE you are using. Please note that you need to specify the correct tags and attributes in the extended_valid_elements property. If this doesn’t seems to work, try adding “media” in the plugin property. If still doesn’t work, send me you initialization script.
How to embed style tags?
I need to be able to embed tags but tinymce strips them off. How or what config settings do i edit to make this possible?
Didn’t work for me 🙁