[SOLVED] add class to images in tinyMCE

Hi,

Does anyone know if its possible to create a few image classes in CSS then assign them in the tinyMCE image upload?

Basically i can add the css in the lines of each image i upload but i’m thinking to make it easier for my users it owuld be easier if they could just select a class from a drop down list i.e alignleft or alignright.?

thanks

Hi Shickson,

http://wiki.modxcms.com/index.php/TinyMCE

System Configuration
There are a number of TinyMCE specific settings in the System Configuration under the Interfaces & Features tab. Each of these settings only apply to the use of TinyMCE within the manager. NOTE: Since all of these settings can be overridden on a per-user level, be sure and check your user settings should changes to the main System Configuration appear not to work.

CSS selectors
Here you can enter a list of selectors that should be available in the editor. Enter them as follows:
’displayName=selectorName;displayName2=selectorName2’ (do not type quotes)
For instance, say you have .mono and .smallText selectors in your CSS file, you could add them here as:
’Monospaced text=mono;Small text=smallText’
Note that the last entry should not have a semi-colon after it.

those styles will then be available in your TinyMCE

Unfortunately TinyMCE does this poorly. What I have done in the past is one of two things. I have either used a plugin to change the align="left" to a class="left" or another way to do it is to create a custom user.css file that only contains rules specifically for use with TinyMCE in the user styles dropdown. Create a simple stylesheet with the rules, config TinyMCE to use it in Tools->Config->Interface&Features: Path to CSS file.

This is the easier of the two methods I have used but I am sure there are several other approaches to handle this.

You can only use classes and they should be simple rules like:

The second method worked perfect... thanks!