TinyMCE styles?

Just installed the TinyMCE add-on to my demo site, and been hunting around through the docs and on the forum, but can't find the answer...

How do I get TinyMCE set up so it will display some "Styles" in the toolbar that can be applied to the content?

It's been discussed, just not recently, and the old information isn't making much sense to me as I am working with Revo.

Thanks!

Under system settings, filter to "Rich Text Editor".

Second line item, "CSS Selectors for Editor". Enter comma separated list of css selectors.

You can also specify a css file, but I haven't had much luck with that one yet. I specify the path... but I can't see where it shows up in the editor. <shrug>

Thanks, Frogabog! I was able to get the css file path to work by using a fully-distinguished URL to my css file. Any classes defined in it appear in the Styles drop-down in TinyMCE. I wasn't able to get a relative path to work - not sure where it needs to be relative from.

Now that I think about it, you could probably use in the path.

Since I have a couple css files at the moment, for this purpose I've combined them into one file in a separate folder and set the full path to that file.

I appreciate the feedback, it's now working beautifully! Thank you :~}

Hello I haven't tried adding a url but for me class definitions entered in there (i.e. Core -> Rich Text Editor) get ignored, they do not appear in TinyMCE styles menu.

In order to make them available for content editors I had to enter them into a different system setting: instead of Core I choose tinyMCE from the first menu in settings and then there is nother CSS selectors under Area: tinyMCE.

Can anyone confirm this is the normal behaviour? all in all this should be cleaned in a future modx version (!?)

This works for me (2.2.6):

Class names in tiny.css_selectors (System Settings > tinymce > CSS Selectors)
These appear under the Styles button in TinyMCE.
For example: Float: Left=float-left;Float: Right=float-right
The Styles menu will show Float: Left and Float: Right and selecting one of those will apply a class of float-left or float-right to the element.

Then if you want to see the effect of those classes directly in the editor, put the absolute path to your CSS file in editor_css_path (System Settings > core > Rich-Text Editor > Path to CSS file).
For example: /css/content.css (css file is at http://somesite.com/css/content.css)

Quote from: lukwe0 at Feb 06, 2013, 11:19 AM

Hello I haven't tried adding a url but for me class definitions entered in there (i.e. Core -> Rich Text Editor) get ignored, they do not appear in TinyMCE styles menu.

In order to make them available for content editors I had to enter them into a different system setting: instead of Core I choose tinyMCE from the first menu in settings and then there is nother CSS selectors under Area: tinyMCE.

Can anyone confirm this is the normal behaviour? all in all this should be cleaned in a future modx version (!?)

This is normal, the correct place to add your classes to tinyMCE, is in the tinyMCE area of system settings. Not the core.