CODEWITHSUNDEEP
htmlcsstinymce
dabadaba
dabadaba

Reputation: 9522

TinyMCE custom content CSS

I'm using TinyMCE to let my users send emails but I wouldn't want these images to exceed max width, so I'm trying to set up the content_css option with the rules:

img {
    max-width: 100%;
}

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

This is how I initialize 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
    }
});

However, when sending a test email, it's clear those styles aren't being applied to images in the email body. I would expect /static/css/content.css to be included in the content, but when inspecting tinymce.get('id_body').getContent() it isn't included at all. So that's obviously why the styles aren't being applied: the stylesheet isn't being loaded. For those wondering http://somedomain.org/static/css/content.css returns the stylesheet properly.

I don't quite work how TinyMCE makes this work. How am I supposed to use a custom stylesheet for my content?

Upvotes: 1

Views: 448

Answers (2)

Teo Bebekis
Teo Bebekis

Reputation: 675

If you need your css styles to be applied when sending an email, then use:

tinyMCE.init({
    ...
    valid_children : "+body[style],+body[div]"
});

and then add your css styles as usually to the html markup.

Check the docs: https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@valid_children/

Upvotes: 0

Michael Fromin
Michael Fromin

Reputation: 13746

The real question here is...

"how do I send an email and properly apply the CSS that I want to the content of that email"

This is (on its own) a broad topic that has a variety of answers but I will tell you what our customers have been most successful with - inlining the CSS right before the content gets sent as an email.

When you work with content in TinyMCE, the content_css setting allows you to inject CSS into the <iframe> where you are editing content. However, that CSS is still an external style sheet. If you were to look at the HTML that is created in TinyMCE you would see the HTML you created (e.g. <p>I am a paragraph</p>) but the CSS remains externalized. This works great for TinyMCE as it allows you to separate the content from its display characteristics but this is not great for sending an email as many email clients don't allow you to pass in an external style sheet with your HTML email.

A prudent approach to mitigating this is to use external CSS for content authoring while in TinyMCE (content_css) and then use a tool like Juice (https://github.com/Automattic/juice) to programmatically add the inline styles to the content right before the email is sent.

If you do this you can setup external CSS for TinyMCE so that the content looks exactly as you need while in the web browser. You can then pass the HTML from TinyMCE along with the external CSS to a tool like Juice and it will "inline" all the CSS. This modified HTML is what you can send via email.

This is cleaner and easier to setup in TinyMCE and has two primary advantages:

  • The size of the content in the database will be smaller as the HTML will no longer contain all of that inline CSS.
  • You can later choose to change the external CSS and all future emails would magically adopt the new look because the CSS is being inlined dynamically right before the mail is sent.

This whole topic is actually pretty large and complicated so I would spend some time researching options and current best practices around HTML emails (they change rather often). Knowing the email clients you wish to support and what HTML/CSS they support can be maddening on its own.

Note: I am not suggesting that the Juice library is good or bad - it is but one of a variety of libraries that can do this work and was used solely as an example.

Upvotes: 2

Related Questions