Javascript中的CSS内联(premailer)

CSS Inliner in Javascript (premailer)

本文关键字：premailer 内联 中的 CSS Javascript      更新时间：2023-09-26

我使用CKEDITOR 4，我想过滤HTML内容，以直接在HTML元素中插入样式，如MailChimp及其CSS内联(http://beaker.mailchimp.com/inline-css)。但我必须在Javascript中做，有人有想法吗?

我可以使用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/

Edit:从未完成的poc中清理我的GH帐户，我删除了下面提到的工具，因此链接导致404。不过，还有一个别人的项目，你可能会感兴趣:http://styliner.slaks.net/

我创建了简单的CSS样式inline - styliner.

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

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

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

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

相关文章：