Adding CSS text to iframe contents using Javascript

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?

Here's some code that will add a style rule to a document in all major browsers:

var addCssRule = (function() {
    var addRule;

    if (typeof document.styleSheets != "undefined" && document.styleSheets) {
        addRule = function(selector, rule, doc, el) {
            var sheets = doc.styleSheets, sheet;
            if (sheets && sheets.length) {
                sheet = sheets[sheets.length - 1];
                if (sheet.addRule) {
                    sheet.addRule(selector, rule)
                } else if (typeof sheet.cssText == "string") {
                    sheet.cssText = selector + " {" + rule + "}";
                } else if (sheet.insertRule && sheet.cssRules) {
                    sheet.insertRule(selector + " {" + rule + "}", sheet.cssRules.length);
                }
            }
        }
    } else {
        addRule = function(selector, rule, doc, el) {
            el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
        };
    }

    return function(selector, rule, doc) {
        doc = doc || document;

        var head = doc.getElementsByTagName("head")[0];
        if (head && addRule) {
            var styleEl = doc.createElement("style");
            styleEl.type = "text/css";
            styleEl.media = "screen";
            head.appendChild(styleEl);
            addRule(selector, rule, doc, styleEl);
            styleEl = null;
        }
    };
})();

addCssRule("h2", "color:red", document);

In the case of TinyMCE's editor document, assuming you have an editor instance stored in a variable called editor:

addCssRule("h2", "color:red", editor.getDoc());

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){}
}