Javascript中的CSS Inliner(预制商)

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。不过，还有其他人的项目，您可能会感兴趣：http ://styliner.slaks.net/

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

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

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