Javascript中的CSS内联(premailer)

Question

我使用CKEDITOR4，我想过滤一个超文本标记语言内容，以便将样式直接插入到超文本标记语言元素中，比如带有CSS内联(http://beaker.mailchimp.com/inline-css)的MailChimp。但我一定要在Javascript中做，有人有想法吗？

我可以使用jQuery和PrototypeJs。

我不能使用外部API。

我使用CKEditor的测试jsFiddle (粘贴时)：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，但是这个技巧打开了一个标签，它在火狐中默认是被阻止的…

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

Answer 1

编辑：从未完成的PoCs中清除我的GH帐户我删除了下面提到的工具，因此链接指向404。不过，你可能会对其他人的项目感兴趣：http://styliner.slaks.net/

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

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

它缺乏对CSS特异性的支持，所以至少在目前，要使用它，您必须手动对规则进行排序。但也许我很快就会有时间添加这个功能。

Answer 2

我不确定这是否会有帮助，但我发现了一个很好的小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();
            }
        });

然后可以将页面复制/粘贴到电子邮件正文中。