How-to use timymce
How to use TinyMCE for WYSIWYG editing in your Email Marketing Platform – like Mailchimp and Marketo: a tutorial
Published February 8th, 2023
31 min read
TABLE OF CONTENTS
5.
Everyday 333 billion (B) emails are sent, but not every email reaches its destination. By 2025 that number is expected to increase to 376B (based on projections of communication and email traffic). Even when stacked against messaging apps, chat apps, and social media platforms, emails remain integral to daily online life:
- 3.6B people email as of 2020, and by 2025 that number is expected to become 4.6B.
- In comparison, in 2020 only 3.6B people used social media worldwide.
But despite how much people obviously rely on email, it’s becoming harder and harder for senders to reach and connect with them:
- 1 in 6 emails don’t get to the recipient’s mailbox
- 4 in 5 emails are never opened
- And 1 in 20 emails may not render correctly
That’s a problem.
Even if your Email Marketing Platform does get emails in front of the right eyes, email marketers have very high expectations for clear segmentation, adept personalization, and easy automation within their Email Marketing Platform Editing experience. So having the best rich text editor in your Email Marketing Platform is crucial.
By having a strong editing component within your email marketing app – one that makes content creation and its distribution easy – your email marketing can capitalize on the expected market growth from $12.4B to $59.8B by 2032 (almost 5X annualized) over the next 10 years.
You might be building a niche-specific email marketing platform. Or you might be building email marketing into your existing Customer Relationship Management (CRM) system (for example, adding something like MailChimp to Salesforce). Or you may be starting out, and looking to build the next market-leading platform like Marketo. While your email Marketing Platform may take different shapes and forms, there’s always room for innovation and effective products in the marketplace.
Whatever you’re building, the following sections show you how to configure TinyMCE to provide WYSIWYG editing in your Email Marketing Platform – to deliver an email creation experience that users love.
John Rau
Marketing Manager at Tiny
Joe Robinson
Dev Advocate | Tech Writer at Tiny
Di Mace
Communications Manager at Tiny
What you’re building in this tutorial
The end result of the tutorial is a WYSIWYG editing component for a typical Email Marketing Platform – one that matches Mailchimp or Marketo. It includes configuring basic UI elements to simulate the Email Builder interface, and the editor configuration can be duplicated, and integrated into your Email Marketing Platform.
The following demo shows the final, WYSIWYG editing component:
What’s not in scope: There are functions not included, such as drag-and-drop functionality, the ability to parse email contents, and the code that sends the email. All of these functions should be built separately into your application.
Why bother building your own WYSIWYG Email Marketing Platform?
Let’s tackle the two questions most frequently asked by developers and product managers alike, in the context of building their own vs buying components and assembling a state-of-the-art rich text editor within an email marketing platform.
1. Why not build from scratch?
You can build your own email specific rich text editor (RTE) from scratch and there are numerous resources available to aid that process. However, rich text editors are exceptionally complex. A development team that’s inexperienced in developing RTEs, generally underestimates the myriad of edge cases across both browsers and functionality. Even things that are perceived to be basic, are hard. And costs blow out.
Our latest calculations* estimate the cost of building just the basic open source components of three leading rich text editors (excluding advanced features and plugins) varies between US$15M and US$28M. While the time taken ranges from 115 to 220 person-years for a single developer. There must be a better way.
(*as at July 2022)
2. Why build at all? Can’t you buy what you need?
You can, which is why TinyMCE has been engineered so that it’s adaptable to you and your needs. Everything you need is provided out-of-the-box: you pick the features you want from the plugin list, and add them to the core editor. All you do is assemble the components (either through APis or coding), customize parts (if you desire) and draw on the decades-long experience of its builders in rich text editing.
There's even use case specific starter configs and demos, to make it easier for you to get started, along with detailed documentation and support.
LEARN MORE
Find out more about the Buy vs Build debate, in our Whitepaper
Deciding to upgrade vs assembling-and-building
If you already have an app or website, there’s no need to start from scratch. TinyMCE is a flexible WYSIWYG that's easy to integrate. Regardless of your use-case, TinyMCE can easily replace whatever rich text editor you’re currently using, or take the place of a textarea, textbox, or other planned text entry component on a page.
There are pluses and minuses to taking an assemble and upgrade approach, but it can have a very positive effect on your speed-to-market.
Ideally, an upgrade to your current platform shouldn’t present long term difficulties or issues with ongoing maintenance problems. That’s the last thing your team needs: another dependency to maintain. When using TinyMCE through the cloud, Tiny Cloud automatically updates to the latest functionality when new versions are released. (It’s one of the methods we use to reduce development pressure.)
If you’re aiming to upgrade your software, the starter config code is available throughout the tutorial, to use (or just review) as you need. Or, if you’re using a particular framework, TinyMCE is designed to integrate into a variety of frameworks and use cases.
Background/Part 1
The foundation of the email WYSIWYG experience
Email Marketing Platform tools, like Mailchimp or Marketo, begin with a foundation, and then have additional code built on top – to improve the behavior and introduce new features.
The WYSIWYG editing component built in this tutorial follows a similar structure. It has a foundation, which then has additional features built on top to extend its capabilities. The foundational elements the tutorial guides you through are:
- A static, HTML layout for building the email content
- A toolbar placeholder
Remember that this Email Marketing Platform is not a complete application and does not include html parsing, drag and drop, or delivery functionality.
Background/Part 2
Formatting, productivity, and compliance
Once the foundation is ready, and before you copy the Email Marketing Platform Editor into your app, it’s worthwhile taking a close look at the features added in Part 2 of the tutorial. These features are selected to give your Email Marketing Platform a specific experience – one that provides an easy-to-use and familiar set of tools – for making emails that connect with people.
The demo below draws directly from the TinyMCE email marketing starter config.
Part 1 Build
How to build the WYSIWYG Editor
TL;DR
Part 1 of this tutorial lays out the HTML of your email (which you would normally control with custom drag-and-drop functionality), and adds a toolbar placeholder to be shown when there is no active editor.
To get started building the Email Marketing Platform Editor, begin by creating the HTML and CSS that forms the foundation.
Step 1
Building the foundation
Create an HTML file using the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE Email</title>
</head>
<body>
</body>
</html>
Start with a container div tag, and place divs for the toolbar and email class:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE Email</title>
</head>
<body>
<div class="container">
<div class="toolbar"></div>
<div class="email"></div>
</div>
</body>
</html>
Inside the divs holding the email class, place the following demo email content. The following is three nested tables with inline style attributes:
<table style="background-color: #f9f9fb; width: 100%;" border="0">
<tr>
<td align="center">
<table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #eee; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 16px 64px 0;">
<div class="tinymce" id="editor-1" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p>Hey ${Contact.FirstName},</p>
<h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
<p>Are you:</p>
<p><strong>Building a new email client</strong> (i.e. the next Gmail) and need rich text editor functionality?</p>
<p><strong>Building email marketing software</strong> (i.e. the next Mail Chimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
<p>Then use the only WYSIWYG editor that is trusted by 1.5M developers.</p>
<p><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a></p>
</div>
</td>
</tr>
<tr>
<td style="padding: 0 64px 16px;">
<table border="0" style="width: 100%;">
<tr>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-2" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
<h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
<p>Play with this demo to see how our email WYSIWYG editor works.</p>
</div>
</td>
<td style="width: 4%"></td>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-3" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
<h2 style="font-size: 18px;">Try Premium plugins</h2>
<p>Sign up for a 14-day trial and try out all our premium plugins.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #eff0f6; padding: 24px 64px;">
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;"><a href="#" style="color: #a0a9c5;">Update your email preferences</a> or <a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Create a pair of style tags in the head of the demo file:
<style>
</style>
Include the following CSS content to style the demo Email Marketing Platform Editor interface:
<style>
/* Page and email layout */
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
background-color: #f9f9fb;
margin: 0 auto;
max-width: 1000px;
}
.email {
max-width: 840px;
margin: auto;
}
.tinymce:focus {
border-radius: 0.5px;
box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
outline: 0;
}
.toolbar {
background-color: #f9f9fb;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 1;
margin: 0 auto;
max-width: 660px;
border-radius: 10px;
}
@media screen and(min-width: 768px) {
.toolbar {
height: 42px;
min-height: 82px;
outline: 2px solid #eee;
outline-offset: -2px;
background: url("https://i.ibb.co/GM53SBk/disabled-toolbar-tutorial.png") no-repeat center center / contain;
}
}
.tox-toolbar__group:last-of-type {
flex-grow: 1;
}
</style>
Save the changes, and test out the Email Marketing Platform Editor interface. The following demo shows the foundation running:
And the following is the complete code for Step 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Page and email layout */
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
background-color: #f9f9fb;
margin: 0 auto;
max-width: 1000px;
}
.email {
max-width: 840px;
margin: auto;
}
/* Add blue "focus" effect to the active editor */
.tinymce:focus {
border-radius: 0.5px;
box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
outline: 0;
}
/* TinyMCE toolbar tweaks */
/* Style the toolbar */
.toolbar {
background-color: #f9f9fb;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 1;
margin: 0 auto;
max-width: 660px;
border-radius: 10px;
}
/* On tablet and larger devices, show a toolbar placeholder when
there is no active editor selected (the editor loses focus).
This is a screenshot of the toolbar, but with a "disabled"
grey affect applied to the buttons to indicate they are not
active. If you change the toolbar layout, create a screenshot.
Alternatively, you could remove this CSS rule and make the
toolbar disappear when the editor loses focus. */
@media screen and(min-width: 768px) {
.toolbar {
height: 42px;
min-height: 82px;
outline: 2px solid #eee;
outline-offset: -2px;
background: url("https://i.ibb.co/GM53SBk/disabled-toolbar-tutorial.png") no-repeat center center / contain;
}
}
/* Ensure that when empty space on the toolbar is clicked, it does not blur the editor */
.tox-toolbar__group:last-of-type {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar"></div>
<div class="email">
<table style="background-color: #f9f9fb; width: 100%;" border="0">
<tr>
<td align="center">
<table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #eee; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 16px 64px 0;">
<div class="tinymce" id="editor-1" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p>Hey ${Contact.FirstName},</p>
<h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
<p>Are you:</p>
<p>
<strong>Building a new email client</strong>
(i.e. the next Gmail) and need rich text editor functionality?</p>
<p>
<strong>Building email marketing software</strong>
(i.e. the next Mail Chimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
<p>Then use the only WYSIWYG editor that is trusted by 1.5M developers.</p>
<p>
<a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a>
</p>
</div>
</td>
</tr>
<tr>
<td style="padding: 0 64px 16px;">
<table border="0" style="width: 100%;">
<tr>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-2" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
<h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
<p>Play with this demo to see how our email WYSIWYG editor works.</p>
</div>
</td>
<td style="width: 4%"></td>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-3" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
<h2 style="font-size: 18px;">Try Premium plugins</h2>
<p>Sign up for a 14-day trial and try out all our premium plugins.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #eff0f6; padding: 24px 64px;">
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">
<a href="#" style="color: #a0a9c5;">Update your email preferences</a>
or
<a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>The foundation built here is static HTML. What you have built is the layout of our Email Marketing Platform Editor: it uses tables to organize the sections. Each editable section has a unique ID, as well as a “tinymce” class, which is what’s used as the selector when initializing TinyMCE.
IMPORTANT: In your email Marketing Platform app, you would create this layout with your own drag and drop functionality, or use TinyMCE within a template that has fixed, editable content sections.
ABOUT THE TOOLBAR: The toolbar becomes grayed out when clicking away from the WYSIWYG text area. This is called “losing focus”. To keep the toolbar visible at the top of the Email Marketing Platform Editor, when TinyMCE loses focus the TinyMCE toolbar disappears, and the background CSS of the .toolbar element shows a low opacity “grayed-out” image of the toolbar. This design element can be updated when the toolbar changes by:
- Updating the toolbar
- Taking a screencap of the toolbar when the editor is in focus
- Lowering the opacity of the screen cap (cropping the image may be necessary). The image presented in the demo has dimensions of 1320 × 164, however you can adjust this for your application, and your toolbar design.
- Replacing the toolbar image linked in the CSS with the new, updated toolbar.
Part 2 Build
How to build the Email Marketing Platform WYSIWYG Editor
TL;DR
The second part of this tutorial expands on Part 1 by adding TinyMCE to the editable parts of the email.
It then walks through configuring TinyMCE for an optimal Email Marketing Platform experience.
Step 1
Add the TinyMCE editor to the Email Marketing Platform foundation
With the foundation ready, the next part of this tutorial demonstrates how to add and load up TinyMCE, add plugins, and then enable basic editing behavior.
The editor configuration in the following steps places a priority on getting started quickly in the UX, and removing distractions. This is because it’s vital to give people a positive experience right from the moment they start using the application.
These essential TinyMCE options provide a solid UX
Fixed_toolbar_container
Toolbar_mode
Toolbar
Inline Editing
Menubar
Autofocus
Placeholder
a. Plugins
What plugins provide
These are the core functionality engines powering TinyMCE. Configure them as a list in the TinyMCE initialization script to start using them.
Why are fewer plugins included?
This Email Marketing Platform Editor makes use of fewer plugins to keep the editing experience focused. The application also loads slightly faster when unnecessary plugins are left out of the configuration.
How to get started with TinyMCE
Set up a TinyMCE API key if you haven’t yet done so – you can get a free API key now, and access all the premium features (in a 14-day free trial) to make your WYSIWYG word processor
Add the TinyMCE CDN link to the head section of the static HTML demo created in the preceding steps:
<script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/6-dev/tinymce.min.js' referrerpolicy='origin'></script>
Replace the no-api-key segment in the TinyMCE script with your own Tiny API key, which you can find on your TinyMCE account dashboard.
Add the TinyMCE init script. This includes the selector which connects directly with the classes added to the foundation HTML’s classes, and the plugins list:
tinymce.init({
selector: ".tinymce",
plugins: "advcode a11ychecker autocorrect autolink editimage emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker typography",
});
Save the changes
If you already have a website that you’re aiming to run with TinyMCE, take a minute to register your domain as an approved domain in your account.
b. Toolbar
What the Toolbar gives you
The Toolbar is the control center for TinyMCE: the icons found there provide all the functionality needed. It’s also the first element that users usually see when they load the editor.
Why configure the Toolbar?
If all the available options appeared at once, the editing experience could become confusing, possibly delivering a frustrating UX, and lead to the abandonment of the app. The icons selected for this toolbar are included on the basis of what users need – the leading tools in the email marketing space.
There are some additional toolbar configurations that have also been selected, to improve the Email Marketing Platform Editor:
- Toolbar Mode: This option controls how the toolbar behaves when the number of icons exceeds the length of the row. Using the ‘wrap’ option causes the toolbar icons to wrap over multiple rows so they are always visible at the top of the page. This contributes to a clearer User Experience (UX).
- Fixed Toolbar Container: This configuration contributes to UX by centralizing the controls at the top of the Email Marketing Platform Editor. The toolbar is placed inside the top of the application for easier navigation.
How to configure the toolbar
Include the toolbar option under the list of plugins with the following chosen plugins:
...
toolbar: "undo redo | styles | bold italic forecolor | link image emoticons mergetags | align bullist numlist | spellchecker a11ycheck typography | code removeformat",
Set the toolbar mode to ‘wrap’:
...
toolbar: "undo redo | styles | bold italic forecolor | link image emoticons mergetags | align bullist numlist | spellchecker a11ycheck typography | code removeformat",
toolbar_mode: "wrap",
Set up the fixed toolbar container option with the ‘.toolbar’ selector:
...
toolbar: "undo redo | styles | bold italic forecolor | link image emoticons mergetags | align bullist numlist | spellchecker a11ycheck typography | code removeformat",
toolbar_mode: "wrap",
fixed_toolbar_container: ".toolbar",
Save the changes.
c. Menubar
What is the Menubar?
The Menubar is the text that appears along the top of the TinyMCE editor, which includes drop down lists of options enabled by plugins.
Why change its appearance?
The Email Marketing Platform Editor has multiple options designed to improve the UX, and hiding the menubar helps reduce any visual clutter. The menubar can also grant access to editing controls that are not necessarily best suited for every user – like adjusting the line height for email content.
How to set up the Menubar
Include the menubar option and set it to ‘false’:
…
menubar: false,
Save the changes
d. Inline mode
What is Inline mode?
This mode loads the editor inline, directly next to other elements in a particular page. Users can edit their email content without changing modes to another pane, or another part of the page.
Why change to Inline mode?
The advantage of this mode is that it keeps the WYSIWYG editor streamlined, resulting in more positive UX with less clutter and mode change. It also reduces the number of clicks involved when accessing the editor.
How to set Inline mode
Include the inline option, and set it to ‘true’:
…
inline: true,
Save the changes
e. Auto focus
What is Auto focus?
The Auto focus configuration works when the Email Marketing Platform Editor first loads. It positions the cursor and focuses directly into the first editor on the page.
Why include Auto focus?
Auto focus brings the user one step closer to composing their email content, by removing a click from the series of clicks ordinarily needed to start editing email content. It has the added benefit of showing new users that to start editing an individual element, all they need to do is click once to activate the editor.
How to set up Auto focus
Include the auto_focus option, and set it to ‘editor-1’:
…
auto_focus: "editor-1",
Save the changes
f. Placeholder option
What is the Placeholder option?
The Placeholder option is essentially ‘leading text ‘– you set up the initial content to prompt the user to enter their own content into an input field (in this case the Email Marketing Platform Editor).
Why include the Placeholder option?
Placeholder prompts such as “enter text” or “write here” encourage the user to begin adding content, which contributes to an overall positive UX.
How to set up a Placeholder
Include the placeholder text option, and assign it the text “write here…”:
…
placeholder: "Write here..."
Save the changes
With the foundation content now expanded, you have the beginnings of an Email Marketing Platform Editor. Clicking on a specific section triggers the inline editor, and the top toolbar becomes active whenever an editor is active. When the editor is not active, the toolbar is grayed out (toolbar buttons are disabled). The blue borders around the editor appear in the CSS earlier with the “.tinymce:focus” rule.
The following is the complete expanded foundation demo:
In Production
In your app you could do either:
- Create the layout yourself
- Use TinyMCE within a template
Step 2
Control the formatting
Establishing a certain look for an email takes work. And with 1 in 20 emails not rendering correctly, you may want to establish some control mechanisms to keep the hard-fought-for design work from breaking down as it reaches its destination.
The following section of this tutorial explains how to establish some control mechanisms (or guardrails) to keep the content creation process direct, and remove elements that may cause a design breakdown.
These plugin options control formatting
Image_file_types
Style_formats
Object_resizing
Link_target_list
Formats
a. Image_file_types
What are image_file_types?
These file types are the designated file formats that categorize image files (JPEG, PNG, TIFF). The Image file types option restricts what types of images your users can upload into the Email Marketing Platform Editor.
Why configure them?
The goal of format control is preventing the email content from misrendering. Since the current file formats accepted by today’s browsers are JPEG/JPG, GIF, and PNG formats only, preventing incompatible images from being uploaded helps prevent render problems.
How to configure image file types
Add the image_file_types option to your TinyMCE init script.
Set the file types allowed to the following:
images_file_types: "jpeg,jpg,png,gif",
Save the changes
b. Object_resizing
What is Object_resizing?
The Object resizing option either enables or prevents users from resizing objects that can have their size adjusted – like images.
Why configure this option?
Configuring this option avoids the risk of an image expanding beyond the size of the editor, and breaking the final appearance of the email. It prevents images that are too long or wide for a table, or another element, from expanding and breaking any considered layout choices.
How to set it up
Add the object_resizing option to your TinyMCE init script, and configure it to “false”:
object_resizing: false,
Save the changes
c. Link_target_list
What is in a Link_target_list?
This is a list of specific targets for the link dialog, that appear in a dropdown list located inside the link dialog. You can set up your link target list by specifying an object with two properties defined in it: title and value. While you can configure the link target list option, in the case of the Email Marketing Platform Editor, it’s better to to disable this option.
Why disable the link target list?
By default, email clients open all links in a new window or tab, therefore. it’s not ideal to give users the option to set up a link target. Removing this option from the “Add Link” dialog, helps reduce distraction.
How it’s done
Set the link target list option in the TinyMCE init script, and configure it to “false”:
link_target_list: false,
Save the changes
d. Formats
What are formats in TinyMCE?
The formats option allows you to override the default formats of the editor – adding a custom format to better incorporate the Email Marketing Platform Editing experience into your app. Configuring the formats option requires setting up an object with properties such as inline, or styles. You can also specify an array of format objects.
As an example, the H1 font and size are set at 24px and to #335dff respectively. This applies to inline styles as well, which is what email clients demand. You can configure a specific format that targets the H1 HTML tag, and changes the font size and color.
There are three types of formats you can configure:
- Block – targets block level elements, such as the H1 example from the previous paragraph
- Inline – targets inline elements like a span tag
- Selector – applies classes to only specific elements
Why set them up?
By setting up a specific format, you’re controlling the style of text in the email template, without allowing further customization. Taking control of the style and providing limited and specific options reduces the risk of an unwieldy email design being sent.
How it’s done
Create the formats option with an empty array:
formats: {}
Add H1 and H2 block level formatting to the array:
formats: {
h1: { },
h2: { },
}
Set specific format style for these block level elements:
formats: {
h1: { block: "h1", styles: { fontSize: "24px", color: "#335dff" } },
h2: { block: "h2", styles: { fontSize: "18px" } },
}
While still inside the formats option, create a specific format array named ‘calltoaction’:
formats: {
h1: { block: "h1", styles: { fontSize: "24px", color: "#335dff" } },
h2: { block: "h2", styles: { fontSize: "18px" } },
calltoaction: { }
}
Set the selector for this formatting to target the a tag, and include the following style options and values:
formats: {
h1: { block: "h1", styles: { fontSize: "24px", color: "#335dff" } },
h2: { block: "h2", styles: { fontSize: "18px" } },
calltoaction: {
selector: "a",
styles: {
backgroundColor: "#335dff",
padding: "12px 16px",
color: "#ffffff",
borderRadius: "4px",
textDecoration: "none",
display: "inline-block"
}
}
},
Save the changes
e. Style_formats
What are the Style_formats?
Style formats are a part of the styles menu item. You can add specific, custom styles to the styles dropdown toolbar button and the styles menu item. These style items are configured into an array with four types of items, but only two are relevant to forming the Email Marketing Platform Editing experience:
- Style – Contains a title property, which has a string as a value, and an optional name property
- Style Reference – Requires title and format properties, and the format option must refer to a pre-registered format configured with the format option
The style options configured in this tutorial are the option users have to choose from when styling text or buttons.
Why configure these formats?
As mentioned previously, controlling the style helps prevent emails with unusual style choices from being sent.
How to do it
Set up the style formats option in the TinyMCE configuration:
style_formats: []
Configure style formats for title and formats targeting paragraphs, headings, and button styles:
style_formats: [
{ title: "Paragraph", format: "p" },
{ title: "Heading 1", format: "h1" },
{ title: "Heading 2", format: "h2" },
{ title: "Button styles" },
]
Add a style format that references the call to action style set up in the previous section on formats:
style_formats: [
{ title: "Paragraph", format: "p" },
{ title: "Heading 1", format: "h1" },
{ title: "Heading 2", format: "h2" },
{ title: "Button styles" },
{ title: "Call-to-action", format: "calltoaction" }
]
Save the changes.
The completed demo now contains valuable format restriction capabilities:
And the following is the complete code for Step 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
tinymce.init({
// Specify which element(s) to make editable - these are all of our editable
// areas within the email
selector: ".tinymce",
// Tip - To make TinyMCE leaner, only include the plugins you actually need
plugins: "advcode a11ychecker autocorrect autolink editimage emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker typography",
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#basic-toolbar-options
toolbar: "undo redo | styles | bold italic forecolor | link image emoticons mergetags | align bullist numlist | spellchecker a11ycheck typography | code removeformat",
// Toolbar_mode controls how the toolbar behaves when toolbar buttons do not
// fit on one row. Wrap displays all toolbar buttons wrapped over multiple rows
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#toolbar_mode
toolbar_mode: "wrap",
// Render the inline toolbar into an element at the top of the email editor
// https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
fixed_toolbar_container: ".toolbar",
// Toggle the menubar off to get a leaner visual experience
// https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
menubar: false,
// Enable inline mode
// https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
inline: true,
// Once TinyMCE loads, focus on the first editable area so the toolbar is shown
// https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#auto_focus
auto_focus: "editor-1",
// An inline editor is "invisible" when there are no content in the editor
// Make sure to use the placeholder option to show the user where to write
// https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
placeholder: "Write here...",
// Only allow certain image types to be added to emails
// https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
images_file_types: "jpeg,jpg,png,gif",
// We don't want users to be able to resize images by using
// drag and drop because it can break layout templates.
// https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
object_resizing: false,
// In emails we rarely use target for links so we hide the
// target drop down in the link dialog
// https://www.tiny.cloud/docs/tinymce/6/link/#link_target_list
link_target_list: false,
// The formats option is where custom formatting options are defined.
// In this case we define a couple of headings and a button appearance
// for links. HTML Emails require inlining the CSS. Fortunately the
// styles property makes that easy.
// https://www.tiny.cloud/docs/tinymce/6/content-formatting/
formats: {
h1: {
block: "h1",
styles: {
fontSize: "24px",
color: "#335dff"
}
},
h2: {
block: "h2",
styles: {
fontSize: "18px"
}
},
calltoaction: {
selector: "a",
styles: {
backgroundColor: "#335dff",
padding: "12px 16px",
color: "#ffffff",
borderRadius: "4px",
textDecoration: "none",
display: "inline-block"
}
}
},
// The style_formats option controls the styleformat toolbar button menu
// https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats
style_formats: [
{
title: "Paragraph",
format: "p"
},
{
title: "Heading 1",
format: "h1"
},
{
title: "Heading 2",
format: "h2"
},
{
title: "Button styles"
}, {
title: "Call-to-action",
format: "calltoaction"
}
],
// Merge Tags lets users add non-editable personalization tokens to your content, so your
// app can then merge the personalized content into emails before sending
// https://www.tiny.cloud/docs/tinymce/6/mergetags/
mergetags_prefix: "${",
mergetags_suffix: "}",
mergetags_list: [
{
title: "Contact",
menu: [
{
value: "Contact.FirstName",
title: "Contact First Name"
}, {
value: "Contact.LastName",
title: "Contact Last Name"
}, {
value: "Contact.Email",
title: "Contact Email"
}
]
}, {
title: "Sender",
menu: [
{
value: "Sender.FirstName",
title: "Sender First Name"
}, {
value: "Sender.LastName",
title: "Sender Last name"
}, {
value: "Sender.Email",
title: "Sender Email"
}
]
}, {
title: "Subscription",
menu: [
{
value: "Subscription.UnsubscribeLink",
title: "Unsubscribe Link"
}, {
value: "Subscription.Preferences",
title: "Subscription Preferences"
}
]
}
],
// A common feature for email marketing tools is to provide a prepopulated
// list of links to choose. Here we define that list.
// https://www.tiny.cloud/docs/tinymce/6/link/#link_list
link_list: [
{
title: "Features",
value: "https://www.tiny.cloud/tinymce/features/"
}, {
title: "Docs",
value: "https://www.tiny.cloud/pricing/"
}, {
title: "Pricing",
value: "https://www.tiny.cloud/docs/tinymce/6/"
}
],
// Spell Checker Pro options
// https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
// Set the default language
spellchecker_language: "en_US",
// Set Spell Checker Pro to be active when the editor loads
spellchecker_active: true,
// Add brand terms or other words to ignore
spellchecker_ignore_list: {
en_US: ["tinymce", "TinyMCE"]
},
// Accessibility Checker
// set 'aa' level for email WCAG appliance
a11ychecker_level: "aa",
// Advanced Typography
// Set the default language
typography_default_lang: "en-US"
// You can also specify the exact typographic rules to check for using typography_rules
});
</script>
<style>
/* Page and email layout */
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
background-color: #f9f9fb;
margin: 0 auto;
max-width: 1000px;
}
.email {
max-width: 840px;
margin: auto;
}
/* Add blue "focus" effect to the active editor */
.tinymce:focus {
border-radius: 0.5px;
box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
outline: 0;
}
/* TinyMCE toolbar tweaks */
/* Style the toolbar */
.toolbar {
background-color: #f9f9fb;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 1;
margin: 0 auto;
max-width: 660px;
border-radius: 10px;
}
/* On tablet and larger devices, show a toolbar placeholder when
there is no active editor selected (the editor loses focus).
This is a screenshot of the toolbar, but with a "disabled"
grey affect applied to the buttons to indicate they are not
active. If you change the toolbar layout, create a screenshot.
Alternatively, you could remove this CSS rule and make the
toolbar disappear when the editor loses focus. */
@media screen and(min-width: 768px) {
.toolbar {
height: 42px;
min-height: 82px;
outline: 2px solid #eee;
outline-offset: -2px;
background: url("https://i.ibb.co/GM53SBk/disabled-toolbar-tutorial.png") no-repeat center center / contain;
}
}
/* Ensure that when empty space on the toolbar is clicked, it does not blur the editor */
.tox-toolbar__group:last-of-type {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar"></div>
<div class="email">
<table style="background-color: #f9f9fb; width: 100%;" border="0">
<tr>
<td align="center">
<table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #eee; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 16px 64px 0;">
<div class="tinymce" id="editor-1" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p>Hey ${Contact.FirstName},</p>
<h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
<p>Are you:</p>
<p>
<strong>Building a new email client</strong>
(i.e. the next Gmail) and need rich text editor functionality?</p>
<p>
<strong>Building email marketing software</strong>
(i.e. the next Mail Chimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
<p>Then use the only WYSIWYG editor that is trusted by 1.5M developers.</p>
<p>
<a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a>
</p>
</div>
</td>
</tr>
<tr>
<td style="padding: 0 64px 16px;">
<table border="0" style="width: 100%;">
<tr>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-2" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
<h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
<p>Play with this demo to see how our email WYSIWYG editor works.</p>
</div>
</td>
<td style="width: 4%"></td>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-3" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
<h2 style="font-size: 18px;">Try Premium plugins</h2>
<p>Sign up for a 14-day trial and try out all our premium plugins.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #eff0f6; padding: 24px 64px;">
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">
<a href="#" style="color: #a0a9c5;">Update your email preferences</a>
or
<a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Step 3
Boost productivity and enable personalization
With increasing economic and competitive factors challenging marketing teams to do more with less, any email marketing platform that helps improve productivity and deliver increased ROI is a welcome addition.
This section shows how plugins and configurations within TinyMCE help teams to boost their productivity and improve ROI through email personalization.
Did you know?
The average ROI of email marketing is $44 for every $1 spent. Email marketing provides leverage for meeting and managing the pressure to lower costs
These configuration options and plugins provide productivity and personalization enhancements
Merge Tags
Enhanced Image Editing
Advanced Code Editor
Link List
Emoticons
PowerPaste
Autolink
a. Merge Tags
What Merge Tags does
The Merge Tags plugin enables you to personalize emails. When merge tags are set up, your Email Marketing Platform Editor can rely on those merge tags to place key customer data (like first names, or company names) into each email sent. Users only create/edit and send one email – with merge tags standing in for names and addresses that are replaced with actual names and addresses from a database.
TinyMCE’s Merge Tags plugin allows you to specify the merge tags that you want users to add, and the merge tag pattern your email marketing uses. ‘Prefix’ and ‘suffix’ are the characters or symbols that mark merge tag text as separate from normal text, and act as flags to let the application know to replace the values with the matching value stored in the database.
NOTE: TinyMCE provides a way to define and insert merge tags. It does not replace the merge tags with database information. Your email marketing platform must complete this replacement action.
Why optimize Merge Tags?
The ability to personalize email messages at scale offers a sizable gain for efficiency. The tags provided by the plugin are also read-only, which prevents any tag becoming accidentally malformed (and effectively provides a solution for the dreaded “Hi {{first_name}},” email salutation).
How to set up Merge Tags
Start by setting up the prefix and suffix:
Include the mergetag prefix and mergetag suffix options in the TinyMCE configuration:
mergetags_prefix: "",
mergetags_suffix: "",
Set the values to be “${“ for the prefix and “}” for the suffix. You would replace the prefix and suffix for whatever format your merge tags use.
Note: This step is just to show it can be customized. When customizing, make sure the prefix character is different from the suffix character.
mergetags_prefix: "${",
mergetags_suffix: "}",
Save the changes.
With the prefix and suffix set, the next step is creating a merge tag list of content. These are the predefined merge tags that users access when they create personalized email content with your platform. Merge tags are defined in an array, which can contain one or more categories:
Add the mergetags list option:
mergetags_list: [],
Define a title for the list, and create an empty menu.
mergetags_list: [
{
title: "",
menu: [ ]
}
],
Set the title of this category “Contact”:
mergetags_list: [
{
title: "Contact",
menu: [ ]
}
],
Create values and titles to populate the Contact category:
mergetags_list: [
{
title: "Contact",
menu: [
{
value: "",
title: ""
},
{
value: "",
title: ""
},
{
value: "",
title: ""
}
]
},
],
Input the predefined values:
mergetags_list: [
{
title: "Contact",
menu: [
{
value: "Contact.FirstName",
title: "Contact First Name"
},
{
value: "Contact.LastName",
title: "Contact Last Name"
},
{
value: "Contact.Email",
title: "Contact Email"
}
]
},
],
Create a second category titled “Sender”:
mergetags_list: [
{
title: "Contact",
menu: [
{
value: "Contact.FirstName",
title: "Contact First Name"
},
{
value: "Contact.LastName",
title: "Contact Last Name"
},
{
value: "Contact.Email",
title: "Contact Email"
}
]
},
{
title: "Sender",
menu: [ ]
}
],
Create values and titles to populate the Sender category:
mergetags_list: [
{
title: "Contact",
menu: [
{
value: "Contact.FirstName",
title: "Contact First Name"
},
{
value: "Contact.LastName",
title: "Contact Last Name"
},
{
value: "Contact.Email",
title: "Contact Email"
}
]
},
{
title: "Sender",
menu: [
{
value: "Sender.FirstName",
title: "Sender First Name"
},
{
value: "Sender.LastName",
title: "Sender Last name"
},
{
value: "Sender.Email",
title: "Sender Email"
}
]
}
],
Build a third category called “Subscription”, and create an empty menu:
mergetags_list: [
{
title: "Contact",
menu: [
{
value: "Contact.FirstName",
title: "Contact First Name"
},
{
value: "Contact.LastName",
title: "Contact Last Name"
},
{
value: "Contact.Email",
title: "Contact Email"
}
]
},
{
title: "Sender",
menu: [
{
value: "Sender.FirstName",
title: "Sender First Name"
},
{
value: "Sender.LastName",
title: "Sender Last name"
},
{
value: "Sender.Email",
title: "Sender Email"
}
]
},
{
title: "Subscription",
menu: [ ]
}
],
Set up values and titles to fill the category:
mergetags_list: [
{
title: "Contact",
menu: [
{
value: "Contact.FirstName",
title: "Contact First Name"
},
{
value: "Contact.LastName",
title: "Contact Last Name"
},
{
value: "Contact.Email",
title: "Contact Email"
}
]
},
{
title: "Sender",
menu: [
{
value: "Sender.FirstName",
title: "Sender First Name"
},
{
value: "Sender.LastName",
title: "Sender Last name"
},
{
value: "Sender.Email",
title: "Sender Email"
}
]
},
{
title: "Subscription",
menu: [
{
value: "Subscription.UnsubscribeLink",
title: "Unsubscribe Link"
},
{
value: "Subscription.Preferences",
title: "Subscription Preferences"
}
]
}
],
Save the changes
b. Link Lists
What Link Lists are for
The Link List option is provided by the Link plugin. This option allows you to specify a predefined list of links that appear when clicking on the link option, and viewing the link dialog window.
Why would you need to optimize Link Lists?
Defining a list of commonly used links within the application, can boost productivity – because users won’t need to change screens to retrieve a link. They can configure their common links, like their home page or pricing pages, and add them to the Link List.
How to set it up
Set the link list option within the TinyMCE configuration:
link_list: []
Include the title and value properties for the link list array:
link_list: [
{ title: "", value: "" },
{ title: "", value: "" },
{ title: "", value: "" }
]
For the demo, add in the following TinyMCE links to test out the process of using the link list dialog:
link_list: [
{ title: "Features", value: "https://www.tiny.cloud/tinymce/features/" },
{ title: "Docs", value: "https://www.tiny.cloud/pricing/" },
{ title: "Pricing", value: "https://www.tiny.cloud/docs/tinymce/6/" }
]
Save the changes.
ADDED EXTRAS
The following plugins provide important features, despite not requiring any additional configuration changes.
They are all included in the starter configuration used within this tutorial.
c. PowerPaste
What PowerPaste does
PowerPaste comes pre-configured, out-of-the-box with defaults that put the user in control of how they want to copy-paste content. It delivers 99.9% accurate copy-paste results by automatically cleaning the content so that all the meta-data and other hidden ‘behind the scenes’ content is removed. There’s also no bugs, breaks, mysterious white spaces, or unexpected formatting that appears seemingly from nowhere.
Many email authors often craft the email message in other tools, and then send the content for review. Only toward the end of the toolchain does the email itself enter into the Email Marketing Platform Editor. PowerPaste gives you the option to remove or retain formatting – thus saving time for every user.
d. Enhanced Image Editing
What Enhanced Image Editing does
Enhanced Image Editing plugin makes editing images possible within the WYSIWYG. The plugin adds filters and resize plus rotate capabilities for better formatting of images within email content.
e. Emoticons
What Emotions do
The Emotions plugin contains a library of emojis for your users to add to their email. Configure the Emoticons plugin to unlock the emoji toolbar button, which opens a dialog window displaying a selection of different emoticons grouped by category.
f. Autolink
What does the Autolink plugin do?
This plugin automatically creates a link when a URL is pasted into the WYSIWYG Editor – thus saving users those extra steps when adding links to the email content.
g. Advanced Code Editor
What Advanced Code Editor does
The Advanced Code Editor plugin allows power users to access and fine tune the HTML that makes up their email content.
NOTE: If there is any concern about your users breaking their email design using the Advanced Code Editor, you can disable this option by removing the plugin from the plugins list.
With these productivity and personalization options and plugins configured, the Email Marketing Platform Editor displays even more features for your users:
And the following is the complete Step 3 code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6/tinymce.min.js"></script>
<script>
tinymce.init({
// Specify which element(s) to make editable - these are all of our editable
// areas within the email
selector: ".tinymce",
// Tip - To make TinyMCE leaner, only include the plugins you actually need
plugins: "advcode a11ychecker autocorrect autolink editimage emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker typography",
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#basic-toolbar-options
toolbar: "undo redo | styles | bold italic forecolor | link image emoticons mergetags | align bullist numlist | spellchecker a11ycheck typography | code removeformat",
// Toolbar_mode controls how the toolbar behaves when toolbar buttons do not
// fit on one row. Wrap displays all toolbar buttons wrapped over multiple rows
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#toolbar_mode
toolbar_mode: "wrap",
// Render the inline toolbar into an element at the top of the email editor
// https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
fixed_toolbar_container: ".toolbar",
// Toggle the menubar off to get a leaner visual experience
// https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
menubar: false,
// Enable inline mode
// https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
inline: true,
// Once TinyMCE loads, focus on the first editable area so the toolbar is shown
// https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#auto_focus
auto_focus: "editor-1",
// An inline editor is "invisible" when there are no content in the editor
// Make sure to use the placeholder option to show the user where to write
// https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
placeholder: "Write here...",
// Only allow certain image types to be added to emails
// https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
images_file_types: "jpeg,jpg,png,gif",
// We don't want users to be able to resize images by using
// drag and drop because it can break layout templates.
// https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
object_resizing: false,
// In emails we rarely use target for links so we hide the
// target drop down in the link dialog
// https://www.tiny.cloud/docs/tinymce/6/link/#link_target_list
link_target_list: false,
// The formats option is where custom formatting options are defined.
// In this case we define a couple of headings and a button appearance
// for links. HTML Emails require inlining the CSS. Fortunately the
// styles property makes that easy.
// https://www.tiny.cloud/docs/tinymce/6/content-formatting/
formats: {
h1: {
block: "h1",
styles: {
fontSize: "24px",
color: "#335dff"
}
},
h2: {
block: "h2",
styles: {
fontSize: "18px"
}
},
calltoaction: {
selector: "a",
styles: {
backgroundColor: "#335dff",
padding: "12px 16px",
color: "#ffffff",
borderRadius: "4px",
textDecoration: "none",
display: "inline-block"
}
}
},
// The style_formats option controls the styleformat toolbar button menu
// https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats
style_formats: [
{
title: "Paragraph",
format: "p"
},
{
title: "Heading 1",
format: "h1"
},
{
title: "Heading 2",
format: "h2"
},
{
title: "Button styles"
}, {
title: "Call-to-action",
format: "calltoaction"
}
],
// Merge Tags lets users add non-editable personalization tokens to your content, so your
// app can then merge the personalized content into emails before sending
// https://www.tiny.cloud/docs/tinymce/6/mergetags/
mergetags_prefix: "${",
mergetags_suffix: "}",
mergetags_list: [
{
title: "Contact",
menu: [
{
value: "Contact.FirstName",
title: "Contact First Name"
}, {
value: "Contact.LastName",
title: "Contact Last Name"
}, {
value: "Contact.Email",
title: "Contact Email"
}
]
}, {
title: "Sender",
menu: [
{
value: "Sender.FirstName",
title: "Sender First Name"
}, {
value: "Sender.LastName",
title: "Sender Last name"
}, {
value: "Sender.Email",
title: "Sender Email"
}
]
}, {
title: "Subscription",
menu: [
{
value: "Subscription.UnsubscribeLink",
title: "Unsubscribe Link"
}, {
value: "Subscription.Preferences",
title: "Subscription Preferences"
}
]
}
],
// A common feature for email marketing tools is to provide a prepopulated
// list of links to choose. Here we define that list.
// https://www.tiny.cloud/docs/tinymce/6/link/#link_list
link_list: [
{
title: "Features",
value: "https://www.tiny.cloud/tinymce/features/"
}, {
title: "Docs",
value: "https://www.tiny.cloud/pricing/"
}, {
title: "Pricing",
value: "https://www.tiny.cloud/docs/tinymce/6/"
}
]
});
</script>
<style>
/* Page and email layout */
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
background-color: #f9f9fb;
margin: 0 auto;
max-width: 1000px;
}
.email {
max-width: 840px;
margin: auto;
}
/* Add blue "focus" effect to the active editor */
.tinymce:focus {
border-radius: 0.5px;
box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
outline: 0;
}
/* TinyMCE toolbar tweaks */
/* Style the toolbar */
.toolbar {
background-color: #f9f9fb;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 1;
margin: 0 auto;
max-width: 660px;
border-radius: 10px;
}
/* On tablet and larger devices, show a toolbar placeholder when
there is no active editor selected (the editor loses focus).
This is a screenshot of the toolbar, but with a "disabled"
grey affect applied to the buttons to indicate they are not
active. If you change the toolbar layout, create a screenshot.
Alternatively, you could remove this CSS rule and make the
toolbar disappear when the editor loses focus. */
@media screen and(min-width: 768px) {
.toolbar {
height: 42px;
min-height: 82px;
outline: 2px solid #eee;
outline-offset: -2px;
background: url("https://i.ibb.co/GM53SBk/disabled-toolbar-tutorial.png") no-repeat center center / contain;
}
}
/* Ensure that when empty space on the toolbar is clicked, it does not blur the editor */
.tox-toolbar__group:last-of-type {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar"></div>
<div class="email">
<table style="background-color: #f9f9fb; width: 100%;" border="0">
<tr>
<td align="center">
<table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #eee; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 16px 64px 0;">
<div class="tinymce" id="editor-1" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p>Hey ${Contact.FirstName},</p>
<h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
<p>Are you:</p>
<p>
<strong>Building a new email client</strong>
(i.e. the next Gmail) and need rich text editor functionality?</p>
<p>
<strong>Building email marketing software</strong>
(i.e. the next Mail Chimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
<p>Then use the only WYSIWYG editor that is trusted by 1.5M developers.</p>
<p>
<a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a>
</p>
</div>
</td>
</tr>
<tr>
<td style="padding: 0 64px 16px;">
<table border="0" style="width: 100%;">
<tr>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-2" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
<h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
<p>Play with this demo to see how our email WYSIWYG editor works.</p>
</div>
</td>
<td style="width: 4%"></td>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-3" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
<h2 style="font-size: 18px;">Try Premium plugins</h2>
<p>Sign up for a 14-day trial and try out all our premium plugins.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #eff0f6; padding: 24px 64px;">
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">
<a href="#" style="color: #a0a9c5;">Update your email preferences</a>
or
<a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>Step 4
Ensure compliance and quality
In email marketing, timelines are often restrictive. And with more teams now being geographically distributed across the world, juggling time zones can be difficult when you need an email proofed before it goes out. And that’s where TinyMCE’s compliance and quality plugins shine.
Each of the following plugins enhance the quality of your emails. They automatically make sure your user’s content maintains the standards set, without requiring the entire team’s attention.
These plugins ensure compliance and quality
Spell Checker Pro
Link Checker
Accessibility Checker
Advanced Typography
Spelling Autocorrect
a. Spell Checker Pro
What Spell Checker Pro does
Spell Checker Pro adds spell checking as-you-type capabilities to your Email Marketing platform editor, similar to what your users would experience in other word processor-like tools. By default, Spell Checker Pro uses English US dictionaries, and automatically highlights spelling mistakes. If that’s sufficient for the email content your users are planning on writing, you can stop there, but there are other options if you require multi-language spell checking.
Why would you need to optimize it?
TinyMCE’s Spell Checker Pro can be configured to simultaneously spell check across (up to) 38 languages. It makes sure the emails sent out match the language of the target reader. User’s can choose which languages they need to check and, if you want more choice on how and when it activates, there are additional configurations you can make, such as adding words for the spell checker plugin to ignore so they are not a distraction or cause for alarm when your users are writing.
How to set it up
Add the spellchecker language option to your TinyMCE configuration, and set it to “en_US”:
spellchecker_language: "en_US",
Add the spellchecker active option to your config, and set it to ‘true’ so that the the plugin is active when the editor loads:
spellchecker_active: true,
Add the spell checker ignore list option, including the language that the language the words are from:
spellchecker_ignore_list: {
en_US: []
}
Add your target words to ignore as a list of strings:
spellchecker_ignore_list: {
en_US: ["tinymce", "TinyMCE"]
}
Save the changes
d. Accessibility Checker
What does Accessibility Checker do?
With the Accessibility Checker, your users can save time double and triple checking they’ve met the agreed accessibility requirements. Checks are made – set (by default) at Level AA – using the Web Content Accessibility Guidelines (WCAG) requirements as well as standards from Section 508 of the United States Environmental Protection Agency.
Accessible content has become more than a nice-to-have. The Department of Justice has stated that WCAG AA compliance is needed to meet ADA compliance, and avoid unnecessary fines or legal action for inaccessible email content.
NOTE: If you send emails with WCAG AA compliance, you’ve fulfilled your obligations to make emails readable for those living with many forms of temporary and permanent disability.
Accessibility Checker walks the user through each issue to help clarify exactly what needs attention, to make sure your content can be accessed by anyone.
Why would you need to optimize it?
Because there are different degrees of accessibility compliance, and different content authors and audiences may likewise require different levels of compliance. Depending on the kind of content your customers create, you can control the level of accessibility needed, by configuring the accessibility plugin to only test for what’s required.
How to set it up
Are there different levels of accessibility?
Levels of accessibility are defined by WCAG as levels of conformance, and are sorted into three categories: A, AA, or AAA.
WCAG offers more guidance on understanding the levels of conformance.
Check the list of Accessibility Rules, and select a level of accessibility compliance: either A, AA, or AAA are the accepted values for the Accessibility Checker plugin options. Your users can change these levels if needed.
Configure the Accessibility Level option using the level of conformance selected in step 1:
a11ychecker_level: 'aa',
Save the changes.
-2023011111554442.gif)
e. Spelling Autocorrect
What Spelling Autocorrect does
This plugin automatically corrects specific typographical errors as your users type. It can catch common typography errors and capitalization errors, such as “cna” being corrected to “can” or the first letter after a full stop being automatically made a capital letter.
Why would you need to optimize it?
The plugin does not require any optimization to provide compliance and quality control in your Email Marketing Platform Editor.
f. Advanced Typography
What Advanced Typography does
Advanced Typography improves the readability of content. It applies over 25 typographical conventions commonly used in publishing:
- Ending sentences with a full stop
- Correct use of en dash and em dash
- Converting characters to typographically accurate characters: like ½, ™, or ©
Clicking the Advanced Typography button in the toolbar activates the plugin.
Why would you need to optimize it?
You can specify the exact typographical rules to follow, as well as configure the default language that the plugin should use. Many marketers don’t know what typographic rules to follow when creating content, so this plugin helps lift the quality of their work, without requiring a manual review.
To set up and specify the plugin’s rules, use the typography_rules option, and set up the rules using the typograf library definitions.
How to set it up
Add the typography default language option to the TinyMCE configuration:
typography_default_lang:
Set up the default language:
typography_default_lang: "en-US",
Save the changes
g. Link Checker
What Link Checker does
Link Checker plugin automatically validates any URLs placed in the WYSIWYG area as users type content. Any URLS that are flagged as invalid are highlighted in red, and you can inspect them with a dedicated context menu to either try and open the link, remove the link, or ignore it.
Why would you need to optimize it?
No additional changes are needed for the plugin once it is added to the plugin list in the TinyMCE configuration.
NOTE: For the Accessibility Checker, Spell Checker Pro and Advanced Typography plugins, when users run each of these plugins (e.g. click their respective buttons on the toolbar), the content within the currently active editor is checked, not content across all editor instances.
And with these configurations and changes in place, explore the completed Email Marketing Platform Editor:
And the following is the complete source code for this step, and the preceding tutorial steps combined:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
tinymce.init({
// Specify which element(s) to make editable - these are all of our editable
// areas within the email
selector: ".tinymce",
// Tip - To make TinyMCE leaner, only include the plugins you actually need
plugins: "advcode a11ychecker autocorrect autolink editimage emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker typography",
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#basic-toolbar-options
toolbar: "undo redo | styles | bold italic forecolor | link image emoticons mergetags | align bullist numlist | spellchecker a11ycheck typography | code removeformat",
// Toolbar_mode controls how the toolbar behaves when toolbar buttons do not
// fit on one row. Wrap displays all toolbar buttons wrapped over multiple rows
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#toolbar_mode
toolbar_mode: "wrap",
// Render the inline toolbar into an element at the top of the email editor
// https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
fixed_toolbar_container: ".toolbar",
// Toggle the menubar off to get a leaner visual experience
// https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
menubar: false,
// Enable inline mode
// https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
inline: true,
// Once TinyMCE loads, focus on the first editable area so the toolbar is shown
// https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#auto_focus
auto_focus: "editor-1",
// An inline editor is "invisible" when there are no content in the editor
// Make sure to use the placeholder option to show the user where to write
// https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
placeholder: "Write here...",
// Only allow certain image types to be added to emails
// https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
images_file_types: "jpeg,jpg,png,gif",
// We don't want users to be able to resize images by using
// drag and drop because it can break layout templates.
// https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
object_resizing: false,
// In emails we rarely use target for links so we hide the
// target drop down in the link dialog
// https://www.tiny.cloud/docs/tinymce/6/link/#link_target_list
link_target_list: false,
// The formats option is where custom formatting options are defined.
// In this case we define a couple of headings and a button appearance
// for links. HTML Emails require inlining the CSS. Fortunately the
// styles property makes that easy.
// https://www.tiny.cloud/docs/tinymce/6/content-formatting/
formats: {
h1: {
block: "h1",
styles: {
fontSize: "24px",
color: "#335dff"
}
},
h2: {
block: "h2",
styles: {
fontSize: "18px"
}
},
calltoaction: {
selector: "a",
styles: {
backgroundColor: "#335dff",
padding: "12px 16px",
color: "#ffffff",
borderRadius: "4px",
textDecoration: "none",
display: "inline-block"
}
}
},
// The style_formats option controls the styleformat toolbar button menu
// https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats
style_formats: [
{
title: "Paragraph",
format: "p"
},
{
title: "Heading 1",
format: "h1"
},
{
title: "Heading 2",
format: "h2"
},
{
title: "Button styles"
}, {
title: "Call-to-action",
format: "calltoaction"
}
],
// Merge Tags lets users add non-editable personalization tokens to your content, so your
// app can then merge the personalized content into emails before sending
// https://www.tiny.cloud/docs/tinymce/6/mergetags/
mergetags_prefix: "${",
mergetags_suffix: "}",
mergetags_list: [
{
title: "Contact",
menu: [
{
value: "Contact.FirstName",
title: "Contact First Name"
}, {
value: "Contact.LastName",
title: "Contact Last Name"
}, {
value: "Contact.Email",
title: "Contact Email"
}
]
}, {
title: "Sender",
menu: [
{
value: "Sender.FirstName",
title: "Sender First Name"
}, {
value: "Sender.LastName",
title: "Sender Last name"
}, {
value: "Sender.Email",
title: "Sender Email"
}
]
}, {
title: "Subscription",
menu: [
{
value: "Subscription.UnsubscribeLink",
title: "Unsubscribe Link"
}, {
value: "Subscription.Preferences",
title: "Subscription Preferences"
}
]
}
],
// A common feature for email marketing tools is to provide a prepopulated
// list of links to choose. Here we define that list.
// https://www.tiny.cloud/docs/tinymce/6/link/#link_list
link_list: [
{
title: "Features",
value: "https://www.tiny.cloud/tinymce/features/"
}, {
title: "Docs",
value: "https://www.tiny.cloud/pricing/"
}, {
title: "Pricing",
value: "https://www.tiny.cloud/docs/tinymce/6/"
}
],
// Spell Checker Pro options
// https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
// Set the default language
spellchecker_language: "en_US",
// Set Spell Checker Pro to be active when the editor loads
spellchecker_active: true,
// Add brand terms or other words to ignore
spellchecker_ignore_list: {
en_US: ["tinymce", "TinyMCE"]
},
// Accessibility Checker
// set 'aa' level for email WCAG appliance
a11ychecker_level: "aa",
// Advanced Typography
// Set the default language
typography_default_lang: "en-US"
// You can also specify the exact typographic rules to check for using typography_rules
});
</script>
<style>
/* Page and email layout */
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
background-color: #f9f9fb;
margin: 0 auto;
max-width: 1000px;
}
.email {
max-width: 840px;
margin: auto;
}
/* Add blue "focus" effect to the active editor */
.tinymce:focus {
border-radius: 0.5px;
box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
outline: 0;
}
/* TinyMCE toolbar tweaks */
/* Style the toolbar */
.toolbar {
background-color: #f9f9fb;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 1;
margin: 0 auto;
max-width: 660px;
border-radius: 10px;
}
/* On tablet and larger devices, show a toolbar placeholder when
there is no active editor selected (the editor loses focus).
This is a screenshot of the toolbar, but with a "disabled"
grey affect applied to the buttons to indicate they are not
active. If you change the toolbar layout, create a screenshot.
Alternatively, you could remove this CSS rule and make the
toolbar disappear when the editor loses focus. */
@media screen and(min-width: 768px) {
.toolbar {
height: 42px;
min-height: 82px;
outline: 2px solid #eee;
outline-offset: -2px;
background: url("https://i.ibb.co/GM53SBk/disabled-toolbar-tutorial.png") no-repeat center center / contain;
}
}
/* Ensure that when empty space on the toolbar is clicked, it does not blur the editor */
.tox-toolbar__group:last-of-type {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar"></div>
<div class="email">
<table style="background-color: #f9f9fb; width: 100%;" border="0">
<tr>
<td align="center">
<table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #eee; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 16px 64px 0;">
<div class="tinymce" id="editor-1" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p>Hey ${Contact.FirstName},</p>
<h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
<p>Are you:</p>
<p>
<strong>Building a new email client</strong>
(i.e. the next Gmail) and need rich text editor functionality?</p>
<p>
<strong>Building email marketing software</strong>
(i.e. the next Mail Chimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
<p>Then use the only WYSIWYG editor that is trusted by 1.5M developers.</p>
<p>
<a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a>
</p>
</div>
</td>
</tr>
<tr>
<td style="padding: 0 64px 16px;">
<table border="0" style="width: 100%;">
<tr>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-2" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
<h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
<p>Play with this demo to see how our email WYSIWYG editor works.</p>
</div>
</td>
<td style="width: 4%"></td>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-3" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
<h2 style="font-size: 18px;">Try Premium plugins</h2>
<p>Sign up for a 14-day trial and try out all our premium plugins.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #eff0f6; padding: 24px 64px;">
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">
<a href="#" style="color: #a0a9c5;">Update your email preferences</a>
or
<a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Part 3
What’s next, and inline CSS HTML
With the Email Marketing Platform Editor completed, there are a few extra steps needed to place the WYSIWYG editor itself inside the Email Marketing application. Another direction to take (with further development work) is adding drag-and-drop functionality. This is not provided by the WYSIWYG editor, and requires front-end development functionality built in your application.
Processing the email content from the WYSIWYG editor is another important step to take. This means creating HTML with inline CSS, and associated merge tags with actual merge tag data. For inline CSS, creating email content that renders properly across popular email clients represents a challenge. TinyMCE provides a method to assist with this important step.
TinyMCE provides a plugin that takes the editor contents, checks the styles applied to all elements, and then generates HTML with inline CSS.
How to set it up
Configure the TinyMCE plugins list to include the Inline CSS plugin:
// TinyMCE plugins
plugins:
"advcode a11ychecker autocorrect autolink editimage emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker typography inlinecss",
Save the changes
When preparing your content for pre-processing and sending, call the inlinecss.getContent() method. This returns the HTML with inline CSS associated with particular tags:
var editor1content = tinymce.get('editor-1').plugins.inlinecss.getContent();
var editor2content = tinymce.get('editor-2').plugins.inlinecss.getContent();
var editor3content = tinymce.get('editor-3').plugins.inlinecss.getContent();
What comes next is to process and combine the generated HTML into an email that’s ready to send out from your app (remember to set up merge tag replacement).
The following is the final demo that you can try out for yourself:
And here is the complete code example for the tutorial, including a basic inline CSS implementation that outputs the editor-1 content to the console:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
tinymce.init({
// Specify which element(s) to make editable - these are all of our editable
// areas within the email
selector: ".tinymce",
// Tip - To make TinyMCE leaner, only include the plugins you actually need
plugins: "advcode a11ychecker autocorrect autolink editimage emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker typography",
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#basic-toolbar-options
toolbar: "undo redo | styles | bold italic forecolor | link image emoticons mergetags | align bullist numlist | spellchecker a11ycheck typography | code removeformat",
// Toolbar_mode controls how the toolbar behaves when toolbar buttons do not
// fit on one row. Wrap displays all toolbar buttons wrapped over multiple rows
// https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#toolbar_mode
toolbar_mode: "wrap",
// Render the inline toolbar into an element at the top of the email editor
// https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
fixed_toolbar_container: ".toolbar",
// Toggle the menubar off to get a leaner visual experience
// https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
menubar: false,
// Enable inline mode
// https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
inline: true,
// Once TinyMCE loads, focus on the first editable area so the toolbar is shown
// https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#auto_focus
auto_focus: "editor-1",
// An inline editor is "invisible" when there are no content in the editor
// Make sure to use the placeholder option to show the user where to write
// https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
placeholder: "Write here...",
// Only allow certain image types to be added to emails
// https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
images_file_types: "jpeg,jpg,png,gif",
// We don't want users to be able to resize images by using
// drag and drop because it can break layout templates.
// https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
object_resizing: false,
// In emails we rarely use target for links so we hide the
// target drop down in the link dialog
// https://www.tiny.cloud/docs/tinymce/6/link/#link_target_list
link_target_list: false,
// The formats option is where custom formatting options are defined.
// In this case we define a couple of headings and a button appearance
// for links. HTML Emails require inlining the CSS. Fortunately the
// styles property makes that easy.
// https://www.tiny.cloud/docs/tinymce/6/content-formatting/
formats: {
h1: {
block: "h1",
styles: {
fontSize: "24px",
color: "#335dff"
}
},
h2: {
block: "h2",
styles: {
fontSize: "18px"
}
},
calltoaction: {
selector: "a",
styles: {
backgroundColor: "#335dff",
padding: "12px 16px",
color: "#ffffff",
borderRadius: "4px",
textDecoration: "none",
display: "inline-block"
}
}
},
// The style_formats option controls the styleformat toolbar button menu
// https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats
style_formats: [
{
title: "Paragraph",
format: "p"
},
{
title: "Heading 1",
format: "h1"
},
{
title: "Heading 2",
format: "h2"
},
{
title: "Button styles"
}, {
title: "Call-to-action",
format: "calltoaction"
}
],
// Merge Tags lets users add non-editable personalization tokens to your content, so your
// app can then merge the personalized content into emails before sending
// https://www.tiny.cloud/docs/tinymce/6/mergetags/
mergetags_prefix: "${",
mergetags_suffix: "}",
mergetags_list: [
{
title: "Contact",
menu: [
{
value: "Contact.FirstName",
title: "Contact First Name"
}, {
value: "Contact.LastName",
title: "Contact Last Name"
}, {
value: "Contact.Email",
title: "Contact Email"
}
]
}, {
title: "Sender",
menu: [
{
value: "Sender.FirstName",
title: "Sender First Name"
}, {
value: "Sender.LastName",
title: "Sender Last name"
}, {
value: "Sender.Email",
title: "Sender Email"
}
]
}, {
title: "Subscription",
menu: [
{
value: "Subscription.UnsubscribeLink",
title: "Unsubscribe Link"
}, {
value: "Subscription.Preferences",
title: "Subscription Preferences"
}
]
}
],
// A common feature for email marketing tools is to provide a prepopulated
// list of links to choose. Here we define that list.
// https://www.tiny.cloud/docs/tinymce/6/link/#link_list
link_list: [
{
title: "Features",
value: "https://www.tiny.cloud/tinymce/features/"
}, {
title: "Docs",
value: "https://www.tiny.cloud/pricing/"
}, {
title: "Pricing",
value: "https://www.tiny.cloud/docs/tinymce/6/"
}
],
// Spell Checker Pro options
// https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
// Set the default language
spellchecker_language: "en_US",
// Set Spell Checker Pro to be active when the editor loads
spellchecker_active: true,
// Add brand terms or other words to ignore
spellchecker_ignore_list: {
en_US: ["tinymce", "TinyMCE"]
},
// Accessibility Checker
// set 'aa' level for email WCAG appliance
a11ychecker_level: "aa",
// Advanced Typography
// Set the default language
typography_default_lang: "en-US"
// You can also specify the exact typographic rules to check for using typography_rules
});
</script>
<style>
/* Page and email layout */
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
background-color: #f9f9fb;
margin: 0 auto;
max-width: 1000px;
}
.email {
max-width: 840px;
margin: auto;
}
/* Add blue "focus" effect to the active editor */
.tinymce:focus {
border-radius: 0.5px;
box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
outline: 0;
}
/* TinyMCE toolbar tweaks */
/* Style the toolbar */
.toolbar {
background-color: #f9f9fb;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 1;
margin: 0 auto;
max-width: 660px;
border-radius: 10px;
}
/* On tablet and larger devices, show a toolbar placeholder when
there is no active editor selected (the editor loses focus).
This is a screenshot of the toolbar, but with a "disabled"
grey affect applied to the buttons to indicate they are not
active. If you change the toolbar layout, create a screenshot.
Alternatively, you could remove this CSS rule and make the
toolbar disappear when the editor loses focus. */
@media screen and(min-width: 768px) {
.toolbar {
height: 42px;
min-height: 82px;
outline: 2px solid #eee;
outline-offset: -2px;
background: url("https://i.ibb.co/GM53SBk/disabled-toolbar-tutorial.png") no-repeat center center / contain;
}
}
/* Ensure that when empty space on the toolbar is clicked, it does not blur the editor */
.tox-toolbar__group:last-of-type {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar"></div>
<div class="email">
<table style="background-color: #f9f9fb; width: 100%;" border="0">
<tr>
<td align="center">
<table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #eee; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 16px 64px 0;">
<div class="tinymce" id="editor-1" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p>Hey ${Contact.FirstName},</p>
<h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
<p>Are you:</p>
<p>
<strong>Building a new email client</strong>
(i.e. the next Gmail) and need rich text editor functionality?</p>
<p>
<strong>Building email marketing software</strong>
(i.e. the next Mail Chimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
<p>Then use the only WYSIWYG editor that is trusted by 1.5M developers.</p>
<p>
<a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a>
</p>
</div>
</td>
</tr>
<tr>
<td style="padding: 0 64px 16px;">
<table border="0" style="width: 100%;">
<tr>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-2" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
<h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
<p>Play with this demo to see how our email WYSIWYG editor works.</p>
</div>
</td>
<td style="width: 4%"></td>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce" id="editor-3" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
<h2 style="font-size: 18px;">Try Premium plugins</h2>
<p>Sign up for a 14-day trial and try out all our premium plugins.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #eff0f6; padding: 24px 64px;">
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">
<a href="#" style="color: #a0a9c5;">Update your email preferences</a>
or
<a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The final result
WYSIWYG editing in your Email Marketing Platform to rival Mailchimp and Marketo
With the sheer volume of email being sent, and email communications growing day by day, this tutorial’s aim is to help you configure TinyMCE for your email marketing platform. It includes formatting control, productivity boosts and personalization capabilities, as well as compliance and quality control through TinyMCE’s powerful plugins.
If you’re looking for what else you can do to expand on your app’s capacity to meet the challenges of the email marketplace, check on these articles:
To find out more about the email features in this tutorial, contact us for more information.
Joe Robinson
Dev Advocate | Tech Writer at Tiny
Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.
Di Mace
Marketing Communications Manager
Messaging strategist and copywriter whose passion lies in working with brands like Tiny, that have deep-seated values and embrace the power of their story. She gets a kick out of solving problems, loves learning new things and making stuff, every day. When she’s not thinking through clever copy lines or clarifying value propositions, she’s knitting amazing socks for everyone she knows.
John Rau
Marketing Manager at Tiny
A former developer, John works on the Marketing team at Tiny. When he's not spreading the word about TinyMCE, he enjoys taking things apart and *trying* to put them back together (including his house and anything else that looks interesting).
Related Articles
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.