<body>
<div class="container">
<div class="toolbar"></div>
<div class="email">
<table style="background-color: #f9f9fb; width: 100%; padding: 32px 0" 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>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;
}
.toolbar {
background-color: #f9f9fb;
height: 42px;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 1;
}
.tinymce:focus {
border-radius: 0.5px;
box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
outline: 0;
}
tinymce.init({
selector: ".tinymce",
plugins:
"advcode a11ychecker autocorrect autolink editimage emoticons image link linkchecker lists mergetags powerpaste tinymcespellchecker",
toolbar:
"undo redo | styles | bold italic forecolor backcolor | link image emoticons mergetags | align bullist numlist | spellcheckdialog a11ycheck | code removeformat",
menubar: false,
inline: true,
fixed_toolbar_container: ".toolbar",
auto_focus: "editor-1",
link_target_list: false,
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/" }
],
object_resizing: false,
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"
}
}
},
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" }
],
placeholder: "Write here...",
images_file_types: "jpeg,jpg,png,gif",
toolbar_mode: "wrap",
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"
}
]
}
]
});
External CSS
This Pen doesn't use any external CSS resources.