Пользовательский контент TinyMCE CSS

Question

Я использую TinyMCE, чтобы позволить моим пользователям отправлять электронные письма, но я бы не хотел, чтобы эти изображения превышали максимальную ширину, поэтому я пытаюсь настроить параметр content_css с правилами:

img {
    max-width: 100%;
}

img.logo {
    max-height: 300px;
}

Вот как я инициализирую TinyMCE:

tinymce.init({
    selector: '#id_body',
    height: 500,
    content_css: '/static/css/content.css',
    plugins: 'advlist link image lists autolink',
    toolbar: `undo redo | styleselect | bold italic | image | numlist bullist
                | alignleft aligncenter alignright alignjustify | outdent indent`,
    image_description: false,
    relative_urls: false,
    images_upload_handler: function (blobInfo, success, failure) {
        // my handler
    }
});

Однако при отправке тестового электронного письма ясно, что эти стили не применяются к изображениям в теле электронного письма. Я ожидаю, что /static/css/content.css будет включено в контент, но при проверке tinymce.get('id_body').getContent() оно вообще не будет включено. Поэтому очевидно, что стили не применяются: таблица стилей не загружается. Для тех, кому интересно, http://somedomain.org/static/css/content.css возвращает таблицу стилей правильно.

Я не совсем понимаю, как TinyMCE делает эту работу. Как мне использовать собственную таблицу стилей для моего контента?

Answer 1

Настоящий вопрос здесь ...

"как мне отправить электронное письмо и правильно применить CSS, который я хочу, к содержанию этого письма"

Это (сама по себе) широкая топика c, которая имеет множество ответов, но я расскажу вам, с чем наши клиенты добились наибольшего успеха - , вставляя CSS прямо перед контент отправляется по электронной почте .

Когда вы работаете с контентом в TinyMCE, настройка content_css позволяет вам вставить CSS в <iframe>, где вы редактируете контент. Тем не менее, CSS все еще является внешней таблицей стилей. Если вы посмотрите на HTML, созданный в TinyMCE, вы увидите HTML, который вы создали (например, <p>I am a paragraph</p>), но CSS остается внешним. Это прекрасно работает для TinyMCE, так как позволяет отделить контент от его характеристик отображения, но это не очень хорошо для отправки электронной почты, так как многие почтовые клиенты не позволяют передавать внешнюю таблицу стилей с вашей HTML электронной почтой.

Разумный подход к решению этой проблемы заключается в использовании внешнего CSS для создания контента в TinyMCE (content_css), а затем с помощью такого инструмента, как Juice (https://github.com/Automattic/juice), для программного добавления встроенные стили для содержимого непосредственно перед отправкой электронного письма .

Если вы сделаете это, вы можете настроить внешний CSS для TinyMCE, чтобы содержимое выглядело именно так, как вам нужно в веб-браузере. Затем вы можете передать HTML из TinyMCE вместе с внешним CSS такому инструменту, как Juice, и он "встроит" все CSS. Этот измененный HTML - это то, что вы можете отправить по электронной почте.

Это проще и проще в настройке в TinyMCE и имеет два основных преимущества:

• Размер содержимого в базе данных будет меньше, поскольку HTML больше не будет содержать все это встроенное CSS.
• . Позже вы можете изменить внешний CSS, и все будущие электронные письма волшебным образом примут новый внешний вид, поскольку CSS динамически вставляется непосредственно перед отправкой письма. ,

Весь этот топи c на самом деле довольно большой и сложный, поэтому я бы потратил некоторое время на изучение вариантов и современных рекомендаций по HTML электронным письмам (они меняются довольно часто). Знание почтовых клиентов, которые вы хотите sh поддерживать, и того, что они поддерживают в HTML / CSS, само по себе сводит с ума.

Примечание : я не предполагаю, что Библиотека соков хороша или плоха - это всего лишь одна из множества библиотек, которая может выполнять эту работу и использовалась исключительно в качестве примера.