7

我使用 CKEDITOR 4，并且我想过滤 HTML 内容以将样式直接插入 HTML 元素中，例如带有 CSS 内嵌 ( http://beaker.mailchimp.com/inline-css ) 的 MailChimp。但是我必须在Javascript中做，有人有想法吗？

我可以使用 jQuery 和 PrototypeJs。

我不能使用外部 API。

我使用 CKEditor 测试 jsFiddle（粘贴时）：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/

4

2 回答 2

3

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

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

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

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

于 2013-05-14T21:59:23.867 回答
2

我不确定这是否会有所帮助，但我发现这个不错的小 jQuery/javascript 方法可以嵌入到页面中 - http://devintorr.es/blog/2010/05/26/turn-css-rules-into -inline-style-attributes-using-jquery/

我对它进行了一些编辑以支持 IE 并支持附加了多个 CSS 文件的页面，以正确​​的顺序应用样式。该行是必要的，因为 jQuery（从 1.8 开始）显然if(rules[idx].selectorText.indexOf("hover") == -1)不能再使用选择器了。: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();
            }
        });

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

于 2013-05-24T14:03:07.963 回答