The documentation states that you can enter custom styles for tinyMCE using one CSS file called custom_content.css.

In fact, this uses the default tinyMCE configuration content_css and sets its value to /iw/tinymce/config/custom_content.css.

By overriding this property, we can specify whichever css file we want, and however many as we want. so if you have several sites, with different styles, you can customise your configuration to pickup your styles and separate them in different files.

for example, we can create the following files:

/iw/tinymce/config/acme_intranet.css
/iw/tinymce/config/acme_www.css

Here would be the content of acme_intranet.css

@import url("../jscripts/tiny_mce/themes/advanced/editor_content.css");
h2 {color: red}

Here would be the content of acme_www.css

@import url("../jscripts/tiny_mce/themes/advanced/editor_content.css");
h2 {color: green}

Make sure to leave the first line of the css to be

@import url("../jscripts/tiny_mce/themes/advanced/editor_content.css");

In the configuration file, we can modify our configurations to load those css

IWTinyMCECustomConfig("acme_www","content_css","/iw/tinymce/config/acme_www.css");
IWTinyMCECustomConfig("acme_intranet","content_css","/iw/tinymce/config/acme_intranet.css");
Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s