CSS Inliner in Javascript (premailer)

Question

CKEDITOR 4 kullanıyorum ve stili doğrudan CSS inliner (http://beaker.mailchimp.com/inline-css) ile MailChimp gibi HTML Unsurlarına eklemek için bir HTML içeriğini filtrelemek istiyorum. Ama Javascript'te yapmam gerek, birisi bir fikir mi?

jQuery ve PrototypeJs'yi kullanabilirim.

Harici bir API kullanamıyorum.

(macun üzerine) CKEditor ile Testim jsFiddle: http://jsfiddle.net/EpokK/utW8K/7/

yılında:

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

Out: Bu çözüm bulmak

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

: http://tikku.com/scripts/websites/tikku/css_inline_transformer_simplified.js ama bu hüner bir sekme açar ve Firefox'ta varsayılan olarak engellenir ...

API çözümü: http://premailer.dialect.ca/

Answer 1

Basit CSS stilleri inliner yarattım - styliner.

Firefox ve Chrome üzerinde çalışır. Ayrıca IE9 + ve Safari 6'da da çalışabilir, ancak henüz test etmedim. Bu sürüm yeni bir pencereye ihtiyaç duymuyor - iframe kullanıyor (bu yüzden IE üzerinde çalışmayabilir - iframe'leri çalıştırmak için her zaman bazı hilelere ihtiyaç var :).

CSS özgüllüğü için destek içermiyor, en azından şimdilik kullanmak için kuralları el ile sıralamanız gerekir. Ancak bu özelliği yakında eklemek için biraz zaman bulabilirim.

Answer 2

Yardımcı olur emin değilim ama bir sayfa gömülebilir bu güzel küçük jQuery/javascript yöntemini buldum - bu yolu da IE desteklemek için çok az ve kaydetmiştiniz http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/

destekleyecek stilleri doğru sırada uygulayarak, birden çok CSS dosyasına sahip bir sayfa. if(rules[idx].selectorText.indexOf("hover") == -1) satırı gereklidir, çünkü jQuery (1.8'den itibaren) artık :hover seçiciyi kullanamaz.

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

Bu sayfa daha sonra e-posta gövdesine kopyalanabilir/yapıştırılabilir.