How to add site CSS to TinyMCE

[elkman]

Ok, feeling very stupid here. I have been using CMSMS for years but never had a need to add the site's CSS to TinyMCE.

I am building a new site for a nonprofit and they actually have someone who knows what CSS is and wants to manage the site. Great! However, I have never added a CMSMS stylesheet for use directly through TinyMCE.

I checked out the module info and the Tiny website. I just can't figure out "which" of the multiple CSS theme files should be added and how to add them. A link to info regarding this would be extremely helpful. Or, a brief description of how to do this would be a great help.

My headache comes from that fact that there is no single CSS file (at least none that I understand at this time) that could be added. Do I need to include the entire combined stylesheet?

Like I said, I have no clue on this and feeling pretty dumb about it.

Elkman

[JohnnyB]

So., there are two things happening when using the TinyMCE module.
1) The dropdown that allows an editor to choose a CSS 'Style' which is just a class name
2) Any CSS files attached to the page's template via the cms_stylesheet tag will influence the editor for that page

For the first scenario, you can set the CSS Styles that you want your customer to use when creating/editing content. The editor can choose a Style and apply it to any element. And, the actual CSS Style / Class doesn't even have to be in an existing Stylesheet that is linked to the page's template.

For example, I will set a Style in TinyMCE called 'lightbox' that will set a class name to a link to trigger Javascript/jquery.

#1 is achieved by going to the TinyMCE module settings and then under the CSS Styles tab.

For example, assume you have a class in your CSS that will give an element a border like, .myborder {border: 1px solid #777}

In the TinyMCE Styles box, enter something like:
BoxBorder=myborder

When the editor chooses "BoxBorder" from the dropdown, that element will have a border when loaded from the frontend.


--------------------------

#2

But, doing #1 alone won't load the Styles into TinyMCE and show the editor what it looks like. You can help TinyMCE to simulate what it might look like on the frontend while editing a page in the backend. But, I always tell my clients it is only an example, a simulation and it won't look 100% the same in the backend as it does in the frontend. So, with that said, here's how to help tinyMCE.

Create a new Stylesheet in the backend called, "Editor" or something similar.

Then, in that new stylesheet add all of the classes that the Editor will use, like our .myborder {} class.
You will also need to add many of the site's global styles like font styles, backgrounds, etc to help make the editor look similar to the frontend.

Then, attach that new stylesheet to the Template(s) that will need it (any page the Editor will manage).

Next, open the Template and change the cms_stylesheet tag by assigning the stylesheets it should load - note: we don't want it to load the "Editor" stylesheet because that would be redundant and load resource that is not needed on the front end.

Your cms_stylesheet tag should use the name="" attribute to load the stylesheets needed, except for the "Editor" one.

If you have more than one css, I think you need to use more than one tag:
{cms_stylesheet name='resets'}
{cms_stylesheet name='layout'}
{cms_stylesheet name='gallery'}
...etc...

Now, when editing a page, TinyMCE will have styles avaialble in the Styles dropdown and it will load the "Editor" stylesheet so that the WYSIWYG editor simulates the frontend.

[elkman]

Thank you very much for such a detailed and easy to understand explanation. I can get there from here!

Elkman

[velden]

I think #2 kind of defeats the simplicity of using {cms_stylesheet}.

Usually the css you use for your front end page gets inherited in TinyMCE. However, this is only true if you using 'simple' selectors.

TinyMCE is not aware of all elements you use in your template. So if you have

Code: Select all

...
<div id="column-1">{content}</div>
...

and you have a style like

Code: Select all

#column-1 ul {list-style-type : none;}

it will NOT be inherited as TinyMCE is not aware of the #column-1.

You can however force TinyMCE to understand it by adding some extra css in your stylesheet:

Code: Select all

#column-1 ul, #tinymce ul {list-style-type : none;}

The body of TinMCE has the id 'tinymce' so that's how you can make it inherit the same style.

I use (rarely) this way to force a style to be applied in TinyMCE.