CODEWITHSUNDEEP
javascriptcsstinymce
HughieW
HughieW

Reputation: 149

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?

Upvotes: 1

Views: 1551

Answers (2)

Thariama
Thariama

Reputation: 50832

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

Upvotes: 0

Tim Down
Tim Down

Reputation: 324537

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());

Upvotes: 2

Related Questions