Добавление текста CSS в содержимое iframe с использованием Javascript

Question

Я создаю HTML-редактор с использованием TinyMCE, но файл HTML (до того, как TinyMCE имеет какой-либо эффект) имеет элемент стиля в голове. Затем я использую несколько экземпляров TinyMCE на этой странице, поэтому, конечно, эти правила CSS там не применяются к TinyMCE.

Мне удалось сбросить CSS в переменную, и мне удалось добавить элемент <style> в iframe с помощью css внутри него, однако это не влияет на стили элементов внутри фрейма при все. 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. Однако я не могу вставить его! Есть идеи?

Answer 1

Здесь гораздо проще фрагмент кода, чтобы добавить CSS набор правил для TinyMCE редакторов фреймов (предполагая, что редактор ваш экземпляр редактора и 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

Вот код, который добавит правило стиля к документу во всех основных браузерах:

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

В случае редактирования документа TinyMCE, в если у вас есть экземпляр редактора хранится в переменной с именем editor:

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