#TinyMCE: Style and Script Elements

We have begun using TinyMCE as the primary editor in our CMS system.  Some of the functionality is to store pages that are later rendered as html on websites.  This means that often our designers are adding custom javascript and css styles to pages.  In our most recent release we found that when we switched to TinyMCE we lost the functionality to add custom scripts and styles to the pages.  After a mad dash we found that adding the following code to the TinyMCE editor allows the user to enter <style> and <script> elements via the Source Code window.   TinyMCE does add comments around the code that is added but they do not affect the functionality.

TinyMCE Initalization Settings

//Allow html script, style, etc tags to work in the editors
extended_valid_elements: 'pre[*],script[*],style[*]', 
valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
valid_elements : '*[*]', 

TinyMCE Example Input

<script type="text/javascript">
$(function () {
    Console.log('test');
  });
</script>



<style>
h2 {
        color: #FF0000;
    }
</style>


TinyMCE Example Output

<script type="text/javascript">// <![CDATA[ $(function () { Console.log('test'); }); // ]]></script>


<style><!-- h2 { color: #FF0000; } --></style>


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s