Ajout de texte CSS au contenu iframe en utilisant Javascript

Question

Je construis un éditeur HTML en utilisant TinyMCE mais le fichier HTML (avant que TinyMCE ait un effet) a un élément de style dans la tête. J'utilise ensuite plusieurs instances TinyMCE sur cette page, donc bien sûr, les règles CSS ne sont pas appliquées à TinyMCE.

J'ai réussi à vider le CSS dans une variable, et j'ai réussi à ajouter un élément <style> à l'iframe avec le css à l'intérieur, mais cela n'affecte pas les styles des éléments dans le cadre à tout. EG h2{color:red;} n'a aucun effet, même si je peux le voir là en utilisant Firebug.

C'est le code que je utilise pour obtenir le contenu de la feuille de style:

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

Ce qui fonctionne, stylesheet contient une série de règles CSS. Cependant, je ne peux pas l'insérer! Des idées?

Answer 1

Voici un extrait de code beaucoup plus simple d'ajouter un ensemble de règles css aux éditeurs de TinyMCE iframes (ed supposant est l'instance de l'éditeur et css_rule est une variable qui contient votre code CSS): 0

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

est ici un code qui ajoutera une règle de style à un document dans tous les principaux navigateurs:

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

Dans le cas du document de l'éditeur de TinyMCE, en supposant que vous avez une instance d'éditeur stocké dans une variable appelée editor:

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