Question

我正在使用TinyMCE构建HTML编辑器，但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规则集添加到tinymce编辑器iframe中（假设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){}
}

使用Javascript将CSS文本添加到iframe内容

2 个答案: