Добавление текста 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

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

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

Answer 2

Вот гораздо более простой фрагмент кода для добавления набора правил CSS в iframes редакторов tinymce (при условии, что ed - это ваш экземпляр редактора, а css_rule - переменная, содержащая ваш код CSS):