Hi Sa

There is a good guide about it in the wiki here: http://our.umbraco.org/wiki/how-tos/customizing-the-wysiwyg-rich-text-editor-%28tinymce%29/add-styles-to-the-drop-down-menu-for-editors-to-use

It should cover everything you need to be aware of the apply your own styles.

/Jan

no.. what i mean here is when  i select text and apply forecolor using tinymce richtext editor,the html content looks like this..

<span style="color: rgb(255, 153, 0);" mce_style="color: #ff9900;">Hello World </span>

but i would like to have it as 

<span class="colorRed";>Hello World</span>

colorRed is a css class which contain colorcode of red..

I think the answer is within the guide I posted at link to? (I'll admit I have only skimmed the text)

Normally I don't do it 100% the way it's described in the guide.

I would go to the styles section, right click and create a new stylesheet called "rte". I would right click on it and a style called "colorRed" (even though I prefer more sematic names for my classes) and I would write ".colorRed" in the alias field. Then I would write "color:red;".

Once the styles are defined go to the "developer" section and go to "Datatypes", and find the datatype for the rich text editor. In here you can select your "rte" stylesheet.

Now go to your content and click the "styles" dropdown - your "colorRed" should be there. Mark a word and apply the style and in html view the class should now be applied.

Hope this helps

/Jan

thank you for your reply..

I should have been more specific.. what i meant here is "forecolor" as like in this link click here (there is a option as like "select text color") and not style dropdown(but nice one,thanks)..

How do you get the forecolor button in Umbraco? I don't even seem to have the option to add that button to TinyMCE in Umbraco...

However, I think it's sort of bad practice to use css class names such as "colorRed", I don't see much advantage in that to having inline style since you wouldn't want to change it to any other color than red anyways (maybe you could argue you could change to another hue) or use such a class to change other aspects than color. I would rather use the style dropdown and add some elements or css classes with semantic meaning and remove the forecolor button..

Regards,
Magnus

to get "forecolor" you need to add the settings in TinyMCEConfig.config

I'm with Jan on this one, don't use font colors (at least don't let your content editors have a free choice of colors), and use predefined css classes like in the tutorial

is working on a reply...