JavaScriptを使用してiframeコンテンツにCSSテキストを追加する

Question

私はTinyMCEを使ってHTMLエディタを構築していますが、TinyMCEの効果が出る前のHTMLファイルにはスタイル要素があります。私はそのページでいくつかのTinyMCEインスタンスを使用していますので、そこのCSSルールはTinyMCEには適用されていません。

私はCSSを変数にダンプすることができましたが、<style>要素をCSSの内側のiframeに追加することはできましたが、フレーム内の要素のスタイルには影響しませんすべて。 EG h2{color:red;}は、Firebugを使って見ることができますが、効果はありません。

これは私がスタイルシートの内容を取得するために使用しているコードです：

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

作品、スタイルシートは、CSSルールの文字列が含まれています。しかし、私はそれを挿入することはできません！何か案は？あなたはeditorという変数に格納されてエディタインスタンスを持っていると仮定すると、TinyMCEをのエディタの文書の場合は

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

：ここ

Answer 1

TinyMCEのエディタのアイフレームにCSSのルールセットを追加するためにはるかに簡単なコードスニペット（仮定EDはあなたのエディタインスタンスとcss_ruleがあなたのCSSコードを保持する変数である）である：

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

は、すべての主要なブラウザで文書にスタイルルールを追加しますいくつかのコードです

ここで

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