CSS Inliner in Javascript (premailer)

Uso CKEDITOR 4 e voglio filtrare un contenuto HTML per inserire lo stile direttamente negli elementi HTML come MailChimp con il suo inliner CSS (http://beaker.mailchimp.com/inline-css). Ma devo fare in Javascript deve, qualcuno un'idea?CSS Inliner in Javascript (premailer)

Posso usare jQuery e PrototypeJs.

Non riesco a utilizzare un'API esterna.

mio jsFiddle test con CKEditor (su incolla): http://jsfiddle.net/EpokK/utW8K/7/

In:

<style> 
    .test { 
     outline: 1px solid red; 
    } 
</style> 
<div class="test">Hello</div>

Out:

<div style="outline: 1px solid red;">Hello</div>

Trovo questa soluzione: http://tikku.com/scripts/websites/tikku/css_inline_transformer_simplified.js ma questo trucco apre una scheda ed è bloccato per impostazione predefinita in Firefox ...

soluzione API: http://premailer.dialect.ca/

fonte

2013-05-14 EpokK

jquery css? http://api.jquery.com/css/ – smerny

http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code – Prisoner

non @Prisoner perché non esiste una soluzione con Javascript – EpokK

Ho creato semplici stili CSS inliner - styliner.

Funziona su Firefox e Chrome. Può funzionare anche su IE9 + e Safari 6, ma non l'ho ancora testato. Questa versione non ha bisogno di una nuova finestra - usa iframe (quindi potrebbe non funzionare su IE - ha sempre bisogno di trucchi per far funzionare gli iframe :).

Manca il supporto per la specificità CSS, quindi almeno per ora, per utilizzarlo, è necessario ordinare le regole manualmente. Ma forse troverò del tempo per aggiungere presto questa funzione.

fonte

2013-05-14 21:59:23 Reinmar

La soluzione dovrebbe funzionare anche su Internet Explorer:/ – EpokK

Quale? IE9 + è facilmente realizzabile, IE8- ha bisogno di più lavoro. – Reinmar

Ho bisogno di un singolo contenitore con html e foglio di stile perché voglio usare CSS Styliner quando si incolla in CKEditor. – EpokK

Non sono sicuro se questo aiuterà, ma ho trovato questo bel po '/ metodo javascript jQuery che può essere inserito in una pagina - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/

Ho modificato un po' per supportare IE e anche per sostenere una pagina con più file CSS allegati applicando gli stili nell'ordine corretto. La riga if(rules[idx].selectorText.indexOf("hover") == -1) è necessaria perché jQuery (a partire da 1.8) non può più utilizzare il selettore :hover apparentemente.

$(document).ready(function ($) { 
      var rules; 
      for(var i = document.styleSheets.length - 1; i >= 0; i--){ 
       if(document.styleSheets[i].cssRules) 
        rules = document.styleSheets[i].cssRules; 
       else if(document.styleSheets[i].rules) 
        rules = document.styleSheets[i].rules; 
       for (var idx = 0, len = rules.length; idx < len; idx++) { 
        if(rules[idx].selectorText.indexOf("hover") == -1) { 
         $(rules[idx].selectorText).each(function (i, elem) { 
          elem.style.cssText = rules[idx].style.cssText + elem.style.cssText; 
         }); 
        } 
       } 
       $('style').remove(); 
       $('script').remove(); 
       $('link').remove(); 
      } 
     });

La pagina può quindi essere copiata/incollata nel corpo dell'e-mail.

fonte

2013-05-24 14:03:07

CSS Inliner in Javascript (premailer)

risposta

Problemi correlati