Hinzufügen von CSS-Text zu Iframe-Inhalten mit Javascript

Question

Ich baue einen HTML-Editor mit TinyMCE, aber die HTML-Datei (bevor TinyMCE irgendeine Wirkung hat) hat ein Stilelement im Kopf. Ich verwende dann mehrere TinyMCE-Instanzen auf dieser Seite, also werden die darin enthaltenen CSS-Regeln natürlich nicht auf TinyMCE angewendet.

Ich habe es geschafft, das CSS in eine Variable zu dumpen, und ich habe ein <style> Element zum iframe mit dem css darin hinzugefügt, aber es betrifft nicht die Stile der Elemente innerhalb des Rahmens um alle. EG h2{color:red;} hat keine Wirkung, obwohl ich es dort mit Firebug sehen kann.

Dies ist der Code, den ich mit dem Stylesheet-Inhalt zu erhalten:

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; 
} 

Welche arbeitet, Sheet eine Reihe von CSS-Regeln enthält. Ich kann es jedoch nicht einfügen! Irgendwelche Ideen?

Answer 1

hier ein viel einfacher Code-Schnipsel ist eine CSS-Regelsatz zu den tinymce Editoren iframes (vorausgesetzt, ed ist der Editor-Instanz und css_rule ist eine Variable, halten Sie Ihre CSS-Code) hinzuzufügen:

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

Answer 2

Hier einige Code, der eine Stilregel zu einem Dokument in allen gängigen Browsern hinzufügen wird:

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

Im Fall von TinyMCE der Editors Dokument, vorausgesetzt, Sie eine Editor-Instanz in einer Variablen gespeichert haben editor genannt:

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