[SOLVED] TinyMCE 3.3.2 CSS selectors generating span tags

Hi All

After installing MODx 1.0.3 with the upgraded TinyMCE plugin (3.3.2), I have noticed that the CSS selectors are not behaving as they used to.

Using styles defined in "manager->tools->configuration->interface & features->TinyMCE settings->CSS selectors" now seems to generate a nested span tag with the class assigned, even if you had selected the whole element.

Apparently, this is due to a change in the TinyMCE CSS engine.
(see: http://tinymce.moxiecode.com/punbb/viewtopic.php?id=20905)

My solution:

1. Remove all selectors from manager->tools->configuration->interface & features->TinyMCE settings->CSS selectors

2. Go to Elements->Manage Elements->Plugins->TinyMCE and add your styles to the custom parameters field, using the style_formats option (http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/style_formats)

eg:


This would appear to be a better way of controlling the styles that the editor has available to them, as it allows you to specify which elements can have a specific class.

Cheers

Gerard

There doesn’t seem to be a way to apply a class to an existing inline element (e.g. anchor).

Look at gerard’s code – all the styles are for block level elements.

Please post a solution here if you find a way to do this.

Try adding something like this to your style_formats:


Added to my example above:

That will give you a class mylinkstyle that you can use on anchors

See: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/style_formats

Gerard

Did it work for you?
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=20976
(yeah, that’s me, I get around)

Hi Hardboiled

Just tried your options from the TinyMCE forum:

As far as I can tell, they are all behaving as expected.

1. I placed cursor in an existing anchor tag and selected Link PDF
result: the Link-PDF class was added to the anchor tag

2. I placed cursor in existing strong tag and selected Bold Class
result: the boldy class was added to the strong tag

3. I selected some text in a paragraph and applied the Link Web style
result: an anchor tag was created with the Link-Web class added.

Couple of things I have noticed about this incarnation of TinyMCE which may shed some light on your problem:

The path bar at the bottom of the editor does not display the classes applied to inline elements, so it might appear as though they are not being applied. Viewing the html source reveals all. (see attached image)

Also, I had to change the Path to CSS file setting in the manager configuration for my custom style sheet to be picked up by TinyMCE.
From this:

To this:

(notice the absence of the leading slash)

Hope this helps

G

That’s a little encouraging. But not for my users – can you imagine having to explain that to non-tech content admins?

I’ll have to amend my user’s guide to remove the bit about how the Markup Path shows the class name.

This is unfortunately another step backwards for TinyMCE, especially after the whole ’no way to remove a block format EVAR’ decision way back.

Hi, I was using Styles to add different CSS classes to elements and then do some funky stuff with JavaScript on it. This is a quite nice and powerful technique.

Many thanks gerardL for pointing in the right direction! I made everything working again.

Quote from: hardboiled at Apr 08, 2010, 12:47 AM

This is unfortunately another step backwards for TinyMCE, especially after the whole ’no way to remove a block format EVAR’ decision way back.

@hardboiled If you want to remove a class from a block format use the "remove formatting" button. i.e. select the whole paragraph and push the "remove formatting" button, hope that helps.

nice solution!
But after aplying these styles, the undo button remains grey?!
No matter wether I define the styles in the custom params or in the config settings.
Strange

Sorry that I warm up such an old thread, but this is exactly the Solution I was looking for, but how do you do this in 2013.

I cannot find the described option:

Go to Elements->Manage Elements->Plugins->TinyMCE and add your styles to the custom parameters field, using the style_formats option

Editing the TinyMCE Plugin i only find "Create/Edit Plugin", "System Events" and "Properties" :-(.