CSS classes in TinyMCE

[formmailer]

Hi,

I wondered if there is a(n easy) way to add CSS classes (preferably using div) to the TinyMCE editor.

I have a few classes that I use quite often in my content field. It would be great if I could select a part of the text and just select the class from a dropdown.

Thanks!

//Jasper

[Adam Kiss]

This actually might be better to search in TinyMCE support.

http://lmgtfy.com/?q=classes+in+tinymce

[formmailer]

I actually did search there before asking. 

And I found something that looked promising: http://www.bram.us/projects/tinymce-plugins/tinymce-classes-and-ids-plugin-bramus_cssextras/ but after a few hours of trying I couldn't get it working with ProcessWire. I am pretty sure this is just my lack of knowledge.

I managed to get the selectorbuttons (dropdowns) in the editor but they are empty. I assume that it has something to do with the content_css value in the InputfieldTinyMCE.js file

	content_css: config.InputfieldTinyMCE.url + 'content.css', 

I even tried to add a second css file (with an absolute path) to this value, but this only resulted in a loss of all markup in the editor, even the by dedault existing H1, H2. etc.

[Soma]

I'm also using this bramus cssextras and it's great an easy. I will soon work on extending the tinymce inputfield config in PW and incorporate this plugin too.

the content.css is just for display in the wysiwyg. usually your sites css.

all you need to is

1. add bramus_cssextras to the plugin string in PW

2. add buttons bramus_cssextras_classes,bramus_cssextras_ids to string in PW

3. add your custom selector strings to the inputfieldTinyMCE.js config like

bramus_cssextras_classesstring : "li::ul[smallList,bigList];img::self[floatLeft,floatRight]",
bramus_cssextras_idsstring : "p::self[introText]",

done, but that all well explained on the plugins website.

[formmailer]

Thank you, now it's working.

The problem was that I missed step 3, because the plugins website said it wasn't required anymore:

As of version 0.4.0 this step is not needed anymore, as bramus_cssextras automatically builds these strings by loading in the specified content_css file via an Ajax call!

That was also why I started talking about the content_css value.

[Soma]

FORMMAILER You're right. I also read that "note" but haven't really gave it attention until recently. I tried it out and it parses the content.css, you can include in TinyMCE, for html tag selectors. To get it working, classes should be defined like "ul.small-list{} ul.small-list li {}".

Only downside I have figured yet with using bramus_cssextras is that it doesn't seem to allow me specify child::parent setups and at the same time have a child::self on the same selector. Like I wanted to give selected images inside an anchor link a class ".fancybox", but only on the anchor and not the image itself. This can be done using img::a[fancybox]; – But now also wanting to specify classes to the image itself with img::self[align_left,align_right]; will overwrite, cause when selecting the image in a link doesn't select the anchor. You can actually use the node path on status bar of tinymce to select the anchor tag, but that's too cumbersome for clients to use it that way. I solved it by having both a.fancybox and img.fancybox, and init fancybox looking for images and a's.

[apeisa]

I'm also using this bramus cssextras and it's great an easy. I will soon work on extending the tinymce inputfield config in PW and incorporate this plugin too.

Any news about this? We also got case where we need client friendly way to choose custom classes, like <div class="notice">This will get some styling</div>.

I quickly took a look and it seems this is something that would be easiest to do in core. Or maybe extending the tinymce inputfield..?

[Soma]

It could be done easily in the core, but most flexible I found is to copy tinyMCE Inputfield to site folder and rename it. Since bramus_cssextras can be used to parse content.css automatically it makes sense to have it outside core anyway. I'm using it like this now in my projects. I came to the conclusion, if we gonna make this in core you would have to extend everytime again when in need of a new plugin/feature.

[apeisa]

Thanks soma, I think we will settle with same solution.