TinyMCE is removing <style> tags

49
votes

I'm facing a problem with TinyMCE. When I enter a style tag in the HTML editor of TinyMCE, it removes the tags when I click update. 

<style type="text/css"> 
     .newclasss { color:#c9c9c9; } 
</style>

My valid elements are follows: 

<script type="text/javascript">

var valid_elms = "hr[class|width|size|noshade]";
valid_elms    += "span[class|align|style],";
valid_elms    += "font[face|size|color|style],";
valid_elms    += "img[href|src|name|title|onclick|align|alt|title|";
valid_elms    += "width|height|vspace|hspace],";
valid_elms    += "iframe[id|class|width|size|noshade|src|height|";
valid_elms    += "frameborder|border|marginwidth|marginheight|";
valid_elms    += "target|scrolling|allowtransparency],style";

extended_valid_elements: valid_elms
</script>

Can anyone help please??

5
csstinymce
@ManuelArwedSchmidt he's not with us to do this (Last seen Jun 14 '10) – naXa

5 Answers

76
votes

Since style tags are not valid XHTML, TinyMCE disabled the ability to add them outside of the tags.

You have to add style tags to the valid children configuration

valid_children : "+body[style]"

Edit: This solution applies to version 3.4.2

Source

7
votes
"hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],img[href|src|name|title|onclick|align|alt|title|width|height|vspace|hspace],iframe[id|class|width|size|noshade|src|height|frameborder|border|marginwidth|marginheight|target|scrolling|allowtransparency],style[type]"

Let me know how that works for you

4
votes

If you put tinyMCE in fullpage mode, you can put styles in the <head>

<script type="text/javascript">
tinyMCE.init({
        plugins : "fullpage",
});
</script>
1
votes

It's a bit hacky but I'm using TinyMCE 4 and was in a pinch, so I added a <script> tag in the TinyMCE editor's Source Code view and used jQuery to change the styles.

<script>$("#signup").css("font-weight", "bold");</script>

This assumes that TinyMCE has been setup not to disallow script tags, and your page already has jQuery included in it like mine did, if not you could use standard javascript to change styles.

0
votes

For me, I need to do the following in TinyMCE 4.5.7:

tinyMCE.schema.addValidChildren("body[style]")