Geek Answers Handbook

CSS Inliner in Javascript (premailer)

I am using CKEDITOR 4 and want to filter the HTML content to insert the style directly into HTML elements such as MailChimp with its built-in CSS ( http://beaker.mailchimp.com/inline-css ). But I have to do in Javascript, should someone have an idea?

I can use jQuery and PrototypeJs.

I can not use external API.

My jsFiddle test with CKEditor (when pasting): http://jsfiddle.net/EpokK/utW8K/7/

IN:

<style> .test { outline: 1px solid red; } </style> <div class="test">Hello</div>

Output:

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

I find this solution: http://tikku.com/scripts/websites/tikku/css_inline_transformer_simplified.js but this trick opens a tab and is blocked by default in Firefox ...

API solution: http://premailer.dialect.ca/

+7
source share
2 answers

I created simple CSS inliner styles - styliner .

It works on Firefox and Chrome. It may also work on IE9 + and Safari 6, but I have not tested it yet. This version does not need a new window - it uses an iframe (so that it does not work on IE - iframes always needs some tricks :).

It lacks support for CSS-specifics, so at least for now, to use it, you will have to manually sort the rules. But maybe I will find some time to add this feature soon.

+3
source

I'm not sure if this will help, but I found this nice jQuery / javascript method that can be embedded in the page - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline- style-attributes-using-jquery /

I edited it a bit to support IE, and also to support a page with multiple CSS files attached, applying styles in the correct order. The string if(rules[idx].selectorText.indexOf("hover") == -1) necessary because jQuery (since version 1.8) can no longer use the :hover selector.

 $(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(); } });

Then the page can be copied / pasted into the body of the email.

+1
source

More articles:


All Articles