Javascript中的CSS Inliner(预制商)

前端之家收集整理的这篇文章主要介绍了Javascript中的CSS Inliner(预制商)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用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>@H_502_11@ 
 

出:

<div style="outline: 1px solid red;">Hello</div>@H_502_11@ 
 

我找到了这个解决方案:http://tikku.com/scripts/websites/tikku/css_inline_transformer_simplified.js
但是这个技巧会打开一个标签,默认情况下它会在Firefox中被阻止…

API解决方案:http://premailer.dialect.ca/

解决方法

编辑:从未完成的PoC清理我的GH帐户我删除了下面提到的工具,因此链接指向404.但是,有其他人的项目可能会让您感兴趣: http://styliner.slaks.net/

我创建了简单的CSS样式inliner – styliner.

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

它缺乏对CSS特异性的支持,所以至少就目前而言,要使用它,你必须手动排序规则.但也许我会找到一些时间来尽快添加功能.

原文链接:https://www.f2er.com/js/157993.html

猜你在找的JavaScript相关文章