Applying css in TinyMCE

Question

I am implementing ForeColor in TinyMCE Rich Text Editor.

it uses style to apply forecolor to selected text as like this

<span style="color: rgb(255, 0, 0);" mce_style="color: #ff0000;">Hello</span>.

i want to apply css class instead of "style" here.. how to apply css class here? These Css Classes contain ColorCodes.

Example:

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

My CSS Class

.colorRed
{
color: #ff0000;
}

thank you

Answer 1

Because you want your css to be applied to tinymces editor content you will need to add your class to the class your editor content gets styled with.

If you are not using a user-defined content_css file when initializing tinymce (init-function) a content_css file will be used depending on the theme you have set in the init function (file used is to be found in a subfolder of folder themes).

I suggest you create an own content.css which you load using content_css setting in the init function. See this link for the tinymce documentation for this. For a first step you could copy one of the content.css from the themes directory and modify it.