TinyMCE Stylesheets in a layout

Question

I am using the fullpage plugin:

I am trying to create a way for my users to select multiple layouts(I have about 6 layouts), in the layouts I have different CSS rules that I would like to for example the background color

so in my layout (and this is just an example for brevity) I have

<style>
body{background-color:red}
</style>
and then my layout.....

<style>
body{background-color:green}
</style>
and then my layout.....

You get the idea ;), (I would like to use stylesheets but this did not seem to work either).

If I go into the editor and select the layout it looks great, until I hit save. It is removed from the editors returned value (I am saving to a DB).

I have tried multiple things:

If in the layout I do this:

<style><!--Start Style-->
body{background-color:red}
<!--End Style--></style>

and then my layout.....

when the user selects the layout the background color is not displayed but this is:

body{background-color:red} body{background-color:red}

but when I save it saves correctly???.

I have this as my setup

valid_elements : "*[*]",  
extended_valid_elements: "style[type]",

I have tried multiple ways, looking for quite a while through tinyMCE's documentation and Googling and no luck.

Can anyone solve or suggest a better approach(The idea is to only have them select one layout which will do everything background color and layout)?

Thanks in Advance!

Answer 1

You should create your own css file for your content (configuration seting content_css) and add the desired class(es) to the formats configuration parameter. If you use the style plugin users are able to select the class from the style-drop-down and everything should be fine.