Allow script and iframe tags in TinyMCE editor

Posted in Articles

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

The TinyMCE rich-text editor is often used in various content management system (such as Joomla). You can type your content into the editor and TinyMCE will translate that to the appropriate HTML code. If you are familiar with HTML and want more control, TinyMCE has a setting that allows you to put in your own custom HTML code. As a security feature, it will only allow certain HTML tags by default. If you try putting in the script tag or the iframe tag, TinyMCE will strip those tags out when it outputs its HTML because those two tags are not allowable tags as defined in the TinyMCE configuration.

The tags and attributes that TinyMCE allows is controlled by the "valid_elements" "extended_valid_elements" configuration parameter of TinyMCE.

Joomla uses the TinyMCE editor, so we will use it as concrete example of how to tweak the TinyMCE configuration to allow for the script tag and the iframe tag. Since we are adding additional allowable tags to TinyMCE’s ruleset, we will add script and iframe to extended_valid_elements. If you search the Joomla source code for "extended_valid_element", you will find that Joomla perform TinyMCE initialization in the file "\plugins\editors\tinymce.php". In particular, in line 296 (of Joomla version 1.5.7), you see …

Change that to …

where you can see that I have added "script[type|src],iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder],"

The items within brackets are the allowable attributes of the corresponding tags. For example, we are allowing the type and src attributes for the script tag. And we are allowing the src, style, scrolling, marginwidth, marginheight, frameborder tags for the iframe tag.