You may be familiar with the pain of writing inline CSS for emails. Unfortunately, it's a necessary evil if you want your email to be pretty across all of your users' various email clients. Now, I know what you're thinking. A couple of lessons ago, we imported a nicely organized CSS style sheet.
And our email template was free from a bunch of ugly inline styles. Notice that the H1 has a simple class on it, which gives it its look and feel. No ugly inline styles there. This may work great for the editor, but how will we send this to our users and ensure it still looks great in their email clients?
You guessed it, TinyMC has a plugin for that. Let's start by installing it. It's called InlineCSS. Now, back over in the browser, the HTML rendered in the editor we'll continue to render the non-inlined version.
We can confirm this in the browser dev tools by searching for that h1. And yeah, it's still only styled via the logo class. It doesn't have any inline styles. So how do we get the HTML with the inline styles?
Well, we need to use a function on the inline CSS plugin called getContent. First, I'll create a button above the editor and give it a label save. You can style this however you want for your own implementation, but ours will just be quick and dirty. Now let's add a new event listener on click and provide a handler that we'll define in just a moment called save.
In script setup above, we'll define the function as an async function. This is where we'll need to call the getContent method. But how do you access the plugin to call its method? Well, that's easy enough.
First, we'll need to create a template ref for the editor component. We'll define that ref and script setup and then connect it to the actual editor component with the ref attribute. Then, on the editor comp value, we can get the TinyMCE editor instance with git editor. This will expose all the plugins under a property called plugins.
and then we can just call getContent on the inline CSS plugin. Finally, getContent is asynchronous, so let's await the result. This will give us an object that looks like this. The HTML property is where all of our HTML with the inline CSS lives.
Now, in a real life app, this is where you'd probably want to persist this HTML to your backend. I would recommend doing so separately from the non-inline content. Why? Well, because you want the non-inlined content readily available to the editor in case your team needs to come back and make edits.
And you want the inlined content readily available to your system so that it has the right HTML when you're ready to press send. For our app, we don't have a backend, so let's just render the result to the page by capturing its value in a reactive ref called output. and we'll need to define that reactive ref above. Finally, so that we can see the result of the output, let's print it below the editor.
I think that does it. Let's give it a try now in the browser. I'll hit save, scroll down, and sure enough, here is a bunch of super ugly HTML here, but that's exactly what we want. Let me search for that H1.
And yeah, here it is. It still has the class of logo, but look at all those inline styles that were generated and added to the tag. Let's try editing the template and saving again, just to make sure the updates work as expected. Yep, there is our update and the inline styles are preserved.
The inline CSS plugin for TinyMCE is an indispensable plugin if your use case involves email. However, let me note just a couple things before concluding. Number one, the InlineCSS plugin does not support inlining all CSS selectors, such as pseudo classes, pseudo elements, at rules, and the important at keyword. Also, InlineCSS is a premium plugin, but it's well worth it, especially since the premium plan comes bundled with a lot of other great tools too.
Tools like templates that make it easy to add or remove whole sections to emails, an accessibility checker to ensure your email templates can be read by everyone, and a robust image editor. Of course, this is just a few of the premium plugins that are available. There are, of course, plenty others that you might be able to fit into this particular use case, but certainly provide functionality well beyond email editing. You may be familiar with the pain of writing inline CSS for emails.
Unfortunately, it's a necessary evil if you want your email to be pretty across all of your users' various email clients. Now, I know what you're thinking. A couple of lessons ago, we imported a nicely organized CSS style sheet. And our email template was free from a bunch of ugly inline styles.
Notice that the H1 has a simple class on it, which gives it its look and feel. No ugly inline styles there. This may work great for the editor, but how will we send this to our users and ensure it still looks great in their email clients? You guessed it, TinyMC has a plugin for that.
Let's start by installing it. It's called InlineCSS. Now, back over in the browser, the HTML rendered in the editor we'll continue to render the non-inlined version. We can confirm this in the browser dev tools by searching for that h1.
And yeah, it's still only styled via the logo class. It doesn't have any inline styles. So how do we get the HTML with the inline styles? Well, we need to use a function on the inline CSS plugin called getContent.
First, I'll create a button above the editor and give it a label save. You can style this however you want for your own implementation, but ours will just be quick and dirty. Now let's add a new event listener on click and provide a handler that we'll define in just a moment called save. In script setup above, we'll define the function as an async function.
This is where we'll need to call the getContent method. But how do you access the plugin to call its method? Well, that's easy enough. First, we'll need to create a template ref for the editor component.
We'll define that ref and script setup and then connect it to the actual editor component with the ref attribute. Then, on the editor comp value, we can get the TinyMCE editor instance with git editor. This will expose all the plugins under a property called plugins. and then we can just call getContent on the inline CSS plugin.
Finally, getContent is asynchronous, so let's await the result. This will give us an object that looks like this. The HTML property is where all of our HTML with the inline CSS lives. Now, in a real life app, this is where you'd probably want to persist this HTML to your backend.
I would recommend doing so separately from the non-inline content. Why? Well, because you want the non-inlined content readily available to the editor in case your team needs to come back and make edits. And you want the inlined content readily available to your system so that it has the right HTML when you're ready to press send.
For our app, we don't have a backend, so let's just render the result to the page by capturing its value in a reactive ref called output. and we'll need to define that reactive ref above. Finally, so that we can see the result of the output, let's print it below the editor. I think that does it.
Let's give it a try now in the browser. I'll hit save, scroll down, and sure enough, here is a bunch of super ugly HTML here, but that's exactly what we want. Let me search for that H1. And yeah, here it is.
It still has the class of logo, but look at all those inline styles that were generated and added to the tag. Let's try editing the template and saving again, just to make sure the updates work as expected. Yep, there is our update and the inline styles are preserved. The inline CSS plugin for TinyMCE is an indispensable plugin if your use case involves email.
However, let me note just a couple things before concluding. Number one, the InlineCSS plugin does not support inlining all CSS selectors, such as pseudo classes, pseudo elements, at rules, and the important at keyword. Also, InlineCSS is a premium plugin, but it's well worth it, especially since the premium plan comes bundled with a lot of other great tools too. Tools like templates that make it easy to add or remove whole sections to emails, an accessibility checker to ensure your email templates can be read by everyone, and a robust image editor.
Of course, this is just a few of the premium plugins that are available. There are, of course, plenty others that you might be able to fit into this particular use case, but certainly provide functionality well beyond email editing.