How to I get styles to appear in TinyMCE?

I'm using Foundation 5 and want to be able to incorporate some of their list styles if possible. I saw a post about how to link the css file to tinyMCE in system settings, but doesn't that mean then that the user would have access to the entire list of styles? That would be a mess to scroll through when I only want to apply a list style. Do I need to set up an abbreviated style sheet with those styles.

You can insert specific classes in System Settings -> Rich Text Editor area as a comma separated list.

See: CSS Selectors for Editor - editor_css_selectors - class1,class2,class3,class4

You could also set up a special css file with your special selectors listed. You wouldn't have to link to it from the site, just load the special file from the server and list the selectors within. Make sure to link to the file with an absolute url (relative won't work) in system settings.

Awesome! Thanks for the great tips. I'll give it a try right away.

Not working like I expected. Tried putting the style ul.square in there and .square. Once I click list in the TinyMCE, all kinds of span tags and inline line height junk happens.

So I created a TV with RichText area, and then hard coded the list. Created a chunk and another selector TV so they can check a box to display it. This works fine. The list probably will not change for quite some time. Pretty static information.

I may revisit later. Or maybe I really need to define the class. Like a div class to wrap the info, and the ul rules that match that class. Is that the way to do it? Like class=myList, then myList ul, and myList li, and so on would follow suit because I have declared myList as an available class? [ed. note: mmcgee last edited this post 12 years, 5 months ago.]

Greetings mmcgee,

Quote from: mmcgee at Apr 07, 2014, 08:30 PM

Once I click list in the TinyMCE, all kinds of span tags and inline line height junk happens.

I'm betting you used Chrome for edits. The span tags with line-height styling sound very much like a known incompatibility between Chrome and TinyMCE, not just in MODX, but in other implementations as well. They can happen even without the custom styling classes you're referring to, in my experience.

I've been able to remove almost all instances of Chrome doing that in MODX / TinyMCE installs by following steps described in posts #7 & 9 in the following thread: https://forums.modx.com/thread/82075/tinymce-adding-tags-everywhere

Safari.

Thanks for the Chrome helper link. Will check it out. This is really the first site that I am building that I will not necessarily be managing, so lot of curve balls this time around. Big difference in coding for my self and coding for others to use.
At this juncture, all content is really just p or h tags and a few links. No images inserted via TinyMCE as all that is done with specific TVs. My issue was trying to just get a simple unordered list with a bit of custom styling.

Currently looking at Redactor. Looks very promising. Just not sure if I want to jump off into something new when I'm so close to finishing the project. Thinking I can update later and treat that as a new project when that's the only thing I have to focus on.

There's minimal text content, so switching would not be that big of a deal.

One day i'm going to port http://alex-d.github.io/Trumbowyg/ to MODX.

The closest thing to Redactor without a license fee. Beautiful and fast. Maybe someone will jump on it before me

I say port away!

Though—I am OK with a license.