Javascript中的CSS Inliner（premailer）
我使用CKEDITOR 4，我想过滤一个HTML内容，直接在CSS Elements inliner（http://beaker.mailchimp.com/inline-css）中将样式直接插入MailChimp等HTML元素中。 但我必须在JavaScript中做，必须有人的想法？
我可以使用jQuery和PrototypeJs。
我无法使用外部API。
我的测试jsFeddle与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/
编辑 ：从未完成的PoCs清除我的GH账户我删除了下面提到的工具，所以链接导致404。但是，还有其他人的项目可能会让你感兴趣：http://styliner.slaks.net/
我创建了简单的CSS样式inliner - styliner。
它适用于Firefox和Chrome。 也可以在IE9 +和Safari 6上运行，但我还没有测试过。 这个版本不需要一个新窗口 - 它使用iframe（所以它可能无法在IE上工作 - 它总是需要一些技巧来使iframe工作:)。
它缺乏对CSS特殊性的支持，所以至少现在要使用它，你必须手动排序规则。 但也许我会尽快找到一些时间来添加此功能。
我不确定这是否会有所帮助，但我发现这个可以嵌入到页面中的小jQuery / javascript方法 - http://devintorr.es/blog/2010/05/26/turn-css-rules-into -inline式的属性 - 使用 - 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();
}
});
该页面可以被复制/粘贴到电子邮件正文中。
链接地址: http://www.djcxy.com/p/71505.html