Question

我使用CKEDITOR 4并且我想过滤HTML内容以直接在HTML元素中插入样式，例如MailChimp及其CSS inliner（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/

Answer 1

编辑：从未完成的PoC中清理我的GH帐户我删除了下面提到的工具，因此该链接指向404.但是有其他人的项目可能会让您感兴趣：{{3 }}

我创建了简单的CSS样式inliner - http://styliner.slaks.net/。

适用于Firefox和Chrome。也可以在IE9 +和Safari 6上运行，但我还没有测试过。这个版本不需要新窗口 - 它使用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();
            }
        });

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

Javascript中的CSS Inliner（预制商）

2 个答案: