Javascript中的CSS内联（premailer）

我使用CKEDITOR 4，我想过滤HTML内容以直接在HTML内容中插入样式，例如MailChimp及其CSS内联（http://beaker.mailchimp.com/inline-css）。但我必须在JavaScript中做，必须有人的想法？Javascript中的CSS内联（premailer）

我可以使用jQuery和PrototypeJs。

我无法使用外部API。

我测试的jsfiddle用的CKEditor（上粘贴）：http://jsfiddle.net/EpokK/utW8K/7/

在：

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

日期：

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

我觉得这个解决方案：http://tikku.com/scripts/websites/tikku/css_inline_transformer_simplified.js 但这一招会打开一个标签并且它在Firefox中默认被阻止...

API解决方案：http://premailer.dialect.ca/

来源

2013-05-14 EpokK

jquery css？ http://api.jquery.com/css/ – smerny 2013-05-14 12:13:31

http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code – Prisoner 2013-05-14 12:15:51

不是@Prisoner因为没有Javascript的解决方案 – EpokK 2013-05-14 12:22:09

我创建了简单的CSS样式inliner - styliner。

它适用于Firefox和Chrome。也可以在IE9 +和Safari 6上运行，但我还没有测试过。这个版本不需要一个新窗口 - 它使用iframe（所以它可能无法在IE上工作 - 它总是需要一些技巧来使iframe工作:)。

它缺乏对CSS特性的支持，所以至少现在要使用它，您将不得不手动排序规则。但也许我会尽快找到一些时间来添加此功能。

来源

2013-05-14 21:59:23 Reinmar

该解决方案还应该在Internet Explorer上工作：/ – EpokK 2013-05-15 07:01:19

哪一个？ IE9 +很容易实现，IE8-需要更多的工作。 – Reinmar 2013-05-15 07:38:59

我需要一个包含html和stylesheet的容器，因为我想在粘贴CKEditor时使用CSS Styliner。 – EpokK 2013-05-15 12:08:26

我不知道这是否会帮助，但我发现这个可爱的小的jQuery/JavaScript的，可以嵌入到页面的方法 - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/

我已经编辑了一点，支持IE，也支持附有多个CSS文件的页面以正确的顺序应用样式。 if(rules[idx].selectorText.indexOf("hover") == -1)行是必要的，因为jQuery（从1.8开始）不能再明显地使用:hover选择器。

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

该页面可以被复制/粘贴到电子邮件正文中。

来源

2013-05-24 14:03:07

Javascript中的CSS内联（premailer）

回答

相关问题