Question

I’m building a HTML editor using TinyMCE but the HTML file (before TinyMCE has any effect) has a style element in the head. I’m then using several TinyMCE instances on that page, so of course those CSS rules in there aren’t being applied to TinyMCE.

I’ve managed to dump the CSS into a variable, and I’ve managed to add a <style> element to the iframe with the css inside it, however it doesn’t affect the styles of the elements inside the frame at all. EG h2{color:red;} has no effect, even though I can see it there using Firebug.

This is the code I’m using to get the stylesheet content:

if(editor.styleSheets.length > 0){
 var css = editor.styleSheets[0];
 if(!is_ie){
  css.cssText = '';
  for(var i=0; i<css.cssRules.length; i++){
   css.cssText += '\n' + css.cssRules[i].cssText;
  }
 }
 stylesheet = css.cssText;
}

Which works, stylesheet contains a string of CSS rules. However, I can’t insert it! Any ideas?

Answer 1

Here is a much simpler code snippet to add a css ruleset to the tinymce editors iframes (assuming ed is your editor instance and css_rule is a variable holding your css code):

var iframe_id = ed.id + '_ifr';
with(document.getElementById( iframe_id).contentWindow ){
    var h = document.getElementsByTagName( "head" );
    if ( !h.length )    return;
        var newStyleSheet = document.createElement ( "style" );
        newStyleSheet.type = "text/css";
        h[0].appendChild (newStyleSheet);
        try{
            if ( typeof newStyleSheet.styleSheet !== "undefined" ) {
            newStyleSheet.styleSheet.cssText = css_rule;
        }
        else {
                newStyleSheet.appendChild( document.createTextNode ( css_rule ) );
                newStyleSheet.innerHTML = css_rule;
        }
    }
    catch(e){}
}