7

私は CKEDITOR 4 を使用しており、HTML コンテンツをフィルタリングして、CSS インライナー ( http://beaker.mailchimp.com/inline-css ) を使用して MailChimp などの HTML 要素に直接スタイルを挿入したいと考えています。しかし、私は 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

2

これが役立つかどうかはわかりませんが、ページに埋め込むことができるこの素晴らしい小さな jQuery/javascript メソッドを見つけました - http://devintorr.es/blog/2010/05/26/turn-css-rules-into -インラインスタイル属性-使用-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();
            }
        });

その後、ページをコピーしてメール本文に貼り付けることができます。

于 2013-05-24T14:03:07.963 に答える