JavaScriptでCSSインライナー（premailer）

Question

私はCKEditorバージョン4を使用して、私はそのCSSインライナー（http://beaker.mailchimp.com/inline-css）とMailChimpのようなHTML要素に直接スタイルを挿入するHTMLコンテンツをフィルタリングします。しかし、私はJavascriptで行う必要があります、誰かがアイデアですか？

jQueryとPrototypeJを使用できます。

私は外部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/

Answer 1

単純なCSSスタイルinliner - stylinerを作成しました。

FirefoxとChromeで動作します。 IE9 +とSafari 6で動作するかもしれませんが、まだテストしていません。このバージョンでは新しいウィンドウは必要ありません。iframeを使用しています（つまり、IEでは動作しない可能性があります。iframeを動作させるためには常にいくつかのトリックが必要です）。少なくとも今のところ、それを使用するように、それは、CSSの特異性のためのサポートを欠い

、手動でルールをソートする必要があります。しかし、私はすぐにこの機能をすぐに追加するための時間を見つけるだろう。

Answer 2

私はこれが役立つかはわからないが、私はページに埋め込むことができます。この素晴らしい小さなjQueryの/ JavaScriptのメソッドた - 私はそれをIEをサポートするためにもサポートするために少し編集したhttp://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/

を複数の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(); 
      } 
     }); 

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