How to apply css added in header of page to tiny mce ?

Question

Hi, I want to apply some classes to the element being edited in mce instance, which will be added to the style tag in head at run time. The class name gets added to the element which is being edited inside tiny mce, but I can not see the effect of applied style. Do I need to do something with the init ? How can I refer to the style sheet added in head tag of the page itself in content_css ? Can I add multiple css to tiny mce ?

Thanks in advance

Answer 1

No, you don't need to change the init, but you need to call code when performing the actions whit which you desire to alter the css.

You can add multiple css to tinymce using the folowing code snippet (foreach css):

iframe_id = (ed.id == 'content_ifr') ? ed.id : ed.id+'_ifr';
css = "http://mydomain.com/css/mycss.css";

with(document.getElementById(iframe_id).contentWindow){
    var h=document.getElementsByTagName("head");
    var newStyleSheet=document.createElement("link");
    newStyleSheet.rel="stylesheet";
    newStyleSheet.href=css;
    h[0].appendChild(newStyleSheet);
}

Refering to content_css won't help you much (at least when the classes you want to assign are not already included here). Flipping css-files out/in of your head probably will do the job.