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