CSS Inliner в Javascript (premailer)

Я использую CKEDITOR 4 и хочу отфильтровать содержимое HTML, чтобы вставить стиль непосредственно в элементы HTML, такие как MailChimp, с его встроенным CSS ( 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>

Из:

<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/

Источник

2 ответа

Решение

Изменить: Очистка моей учетной записи GH от незаконченных PoC Я удалил инструмент, упомянутый ниже, поэтому ссылка ведет на 404. Однако есть чей-то проект, который может вас заинтересовать: http://styliner.slaks.net/

Я создал простые стили CSS inliner - styliner.

Работает на Firefox и Chrome. Может также работать на IE9+ и Safari 6, но я еще не тестировал его. Эта версия не нуждается в новом окне - она ​​использует iframe (поэтому он может не работать в IE - для работы iframe всегда нужны некоторые хитрости:).

В нем отсутствует поддержка специфичности CSS, поэтому, по крайней мере, на данный момент, чтобы использовать его, вам придется сортировать правила вручную. Но, возможно, я найду время, чтобы добавить эту функцию в ближайшее время.

Источник

Я не уверен, поможет ли это, но я нашел этот симпатичный метод jQuery/javascript, который можно встроить в страницу - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/, использующий-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();
            }
        });

Затем страницу можно скопировать / вставить в тело письма.

Источник
Другие вопросы по тегам