TinyMCE
MoxieManager
DriveThe best WYSIWYG editor for email marketing software
Building or extending. Creating or converting.
No matter the project, TinyMCE works best.
Update your email preferences or unsubscribe.
Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA
The email HTML editor that delivers
Integrating TinyMCE’s WYSIWYG text editor into your tech stack ensures you deliver your marketing and ROI goals. Plus, your developers have full control of the code, UI, configuration and integrations, while your non-technical users can create, manage and modify every type of content in your messaging app, email marketing or martech software.
Email starter config
The basic editing experience every email software should start with. Includes all the editing controls your users expect, plus Link Checker, Emojis, Enhanced Image Editing and more.
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>Marketing email editor using inline mode</title>
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
8<script>
9 tinymce.init({
10 selector: '.tinymce',
11 plugins: 'advcode a11ychecker autocorrect autolink editimage emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker',
12 toolbar: 'undo redo | styles | bold italic forecolor backcolor | link image emoticons mergetags | align bullist numlist | spellcheckdialog a11ycheck | code removeformat',
13 toolbar_mode: "wrap",
14 fixed_toolbar_container: '.toolbar',
15 menubar: false,
16 inline: true,
17 auto_focus: 'editor-1',
18 link_target_list: false,
19 link_list: [
20 { title: "Features", value: 'https://www.tiny.cloud/tinymce/features/' },
21 { title: "Docs", value: 'https://www.tiny.cloud/pricing/' },
22 { title: "Pricing", value: 'https://www.tiny.cloud/docs/tinymce/6/' }
23 ],
24 object_resizing : false,
25 formats: {
26 h1: { block: 'h1', styles: { fontSize: '24px', color: '#335dff' } },
27 h2: { block: 'h2', styles: { fontSize: '18px' } },
28 calltoaction: { selector: 'a', styles: { backgroundColor: '#335dff', padding: '12px 16px', color: '#ffffff', borderRadius: '4px', textDecoration: 'none', display: 'inline-block'} }
29 },
30 style_formats: [
31 { title: 'Paragraph', format: 'p' },
32 { title: 'Heading 1', format: 'h1' },
33 { title: 'Heading 2', format: 'h2' },
34 { title: 'Button styles'},
35 { title: 'Call-to-action', format: 'calltoaction' },
36 ],
37 placeholder: "Write here...",
38 images_file_types: "jpeg,jpg,png,gif",
39 editimage_toolbar: "editimage imageoptions",
40 mergetags_list: [
41 {
42 title: "Contact",
43 menu: [{
44 value: 'Contact.FirstName',
45 title: 'Contact First Name'
46 },
47 {
48 value: 'Contact.LastName',
49 title: 'Contact Last Name'
50 },
51 {
52 value: 'Contact.Email',
53 title: 'Contact Email'
54 }
55 ]
56 },
57 {
58 title: "Sender",
59 menu: [{
60 value: 'Sender.FirstName',
61 title: 'Sender First Name'
62 },
63 {
64 value: 'Sender.LastName',
65 title: 'Sender Last name'
66 },
67 {
68 value: 'Sender.Email',
69 title: 'Sender Email'
70 }
71 ]
72 },
73 {
74 title: 'Subscription',
75 menu: [{
76 value: 'Subscription.UnsubscribeLink',
77 title: 'Unsubscribe Link'
78 },
79 {
80 value: 'Subscription.Preferences',
81 title: 'Subscription Preferences'
82 }
83 ]
84 }
85 ],
86
87 });
88</script>
89<style>
90 body {
91 padding: 0;
92 margin: 0;
93 box-sizing: border-box;
94 font-family: Arial, sans-serif;
95 }
96 .container {
97 background-color: #f9f9fb;
98 margin: 0 auto;
99 max-width: 1000px;
100 }
101 .email {
102 max-width: 840px;
103 margin: auto;
104 }
105
106 .tinymce:focus {
107 border-radius: 0.5px;
108 box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
109 outline: 0;
110 }
111
112 .toolbar {
113 background-color: #f9f9fb;
114 position: -webkit-sticky;
115 position: sticky;
116 top: 0;
117 z-index: 1;
118 margin: 0 auto;
119 max-width: 660px;
120 border-radius: 10px;
121 }
122
123 @media screen and (min-width: 768px) {
124 .toolbar {
125 height: 42px;
126 min-height: 82px;
127 outline: 2px solid #eee;
128 outline-offset: -2px;
129 background: url("https://www.tiny.cloud/images/solutions/email/external-demo-disabled-toolbar.png") no-repeat center center / contain;
130 }
131 }
132
133 .tox-toolbar__group:last-of-type {
134 flex-grow: 1;
135 }
136</style>
137</head>
138<body>
139<div class="container">
140 <div class="toolbar"></div>
141 <div class="email">
142 <table style="background-color: #f9f9fb; width: 100%;" border="0">
143 <tr>
144 <td align="center">
145 <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">
146 <tr>
147 <td style="padding: 16px 64px 0;">
148 <div class="tinymce" id="editor-1" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
149 <p>Hey {{Contact.FirstName}},</p>
150 <h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
151 <p>Are you:</p>
152 <p><strong>Building a new email client</strong> (i.e. the next Gmail) and need rich text editor functionality?</p>
153 <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>
154 <p>Then use the only WYSIWYG editor that is trusted by 1.5M developers.</p>
155 <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>
156 </div>
157 </td>
158 </tr>
159 <tr>
160 <td style="padding: 0 64px 16px;">
161 <table border="0" style="width: 100%;">
162 <tr>
163 <td style="width: 48%; vertical-align: top;">
164 <div class="tinymce" id="editor-2" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
165 <p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
166 <h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
167 <p>Play with this demo to see how our email WYSIWYG editor works.</p>
168 </div>
169 </td>
170 <td style="width: 4%"></td>
171 <td style="width: 48%; vertical-align: top;">
172 <div class="tinymce" id="editor-3" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
173 <p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
174 <h2 style="font-size: 18px;">Try Premium plugins</h2>
175 <p>Sign up for a 14-day trial and try out all our premium plugins.</p>
176 </div>
177 </td>
178 </tr>
179 </table>
180 </td>
181 </tr>
182 <tr>
183 <td style="background-color: #eff0f6; padding: 24px 64px;">
184 <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>
185 <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
186 </td>
187 </tr>
188 </table>
189 </td>
190 </tr>
191 </table>
192 <p>💡 TinyMCE's <a href="https://www.tiny.cloud/docs/tinymce/6/inline-css/">Inline CSS</a> plugin can be used to process the editor contents and apply all CSS styles inline, helping to make content ready for the inbox. Open up dev tools and click the button below to see the CSS-inlined editor contents in the console.</p>
193 <button onclick="tinymce.get('editor-1').plugins.inlinecss.getContent().then((value) => { console.log(value.html); });">Get Inlined CSS - Editor #1</button>
194 <button onclick="tinymce.get('editor-2').plugins.inlinecss.getContent().then((value) => { console.log(value.html); });">Get Inlined CSS - Editor #2</button>
195 <button onclick="tinymce.get('editor-3').plugins.inlinecss.getContent().then((value) => { console.log(value.html); });">Get Inlined CSS - Editor #3</button><br><br>
196 </div>
197</div>
198</body>
199</html>"This was exactly one of those upgrades that made our tool more usable. The bigger the feature set people have at their disposal, the more they will use the tool, and the more useful it will be for them. That’s exactly what we’re looking to do with every feature upgrade that we implement, and that’s what Tiny helped us do here."
"TinyMCE is an easy-to-use, intuitive tool, and everyone is happy using it. The way that we have been able to customize the editor is fantastic."
"The amount of money that our clients were spending on email marketing was ridiculous, but TinyMCE helped us build a more cost-effective solution. It just makes everything nice and easy for them - it's a massive difference. We wouldn’t be able to work without it."
"Offering customizable templates with Tiny has helped us grow and helps our customers differentiate themselves in the market. Thanks to Tiny, our customers have been able to take control of their own marketing and branding."
When you need the best
WYSIWYG email editor
Our editor delivers the best
Faster speed-to-market
Save years of developer time and hundreds of thousands of dollars in engineering costs by leveraging our out-of-the-box editor and 24/7 support team. The best WYSIWYG email editor gets you to market faster.
Flexibility to fit into your email creation workflow and provides a variety of options and configurations
Explore features:
Delight your users
Our WYSIWYG email editor is built to mimic the tools your users know and love. There’s no ramp-up or steep learning curves – it’s an editing experience your users already know and enjoy.
Spotlight on user experience, with the same tools and buttons your creators are used to using in email editing programs, as well as a clean copy-paste experience
Explore features:
HTML you can trust
Take the guesswork out of email creation and publish clean and compliant output from the email HTML editor that’s trusted by 1.5M developers, and over 40% of the world’s websites.
Fits within an enterprise-grade tech stack via 400+ customizable APIs and 12+ framework integrations to create the experience users need
Explore features:
HTML email editing tool
Every email offers a chance to convert customers, build awareness and engagement. So it's crucial to choose an intuitive WYSIWYG email editor that's feature-rich and easy to use for marketers, content creators, marketing ops, or writers who don’t have coding skills.
Equally, the editor must be totally customizable so your developers can control the back-end, integrate with existing martech stacks and be confident the HTML output is clean, compliant and reads well on email clients.
TinyMCE is downloaded 350M+ times every year and available through either a free, open source license or a paid commercial license.
All the WYSIWYG features
developers (and users) expect
Email Creation
Enable users to create amazing emails without needing to know code
- Insert predefined, read-only Merge Tags (also known as personalization tokens, or mail merge fields) into your content
- Use Tables to properly lay out emails according to design best practices
- Error-free clean copy-paste from Word, Excel and Google Docs with PowerPaste
- With Templates, users can insert premade sections or boilerplate content to accelerate the creation of emails
- Non-editable plugin protects key sections such as the head or footer from being edited
- Make emails fun and improve your open and click through rates with Emoji Picker
- Inline Editing and Contextual Toolbar lets users style their content in-place as they navigate through the email layout
- Customize the UI with pre-made Skins and Icons or build your own
- Allow users to insert predefined or user-defined, dynamic content using Advanced Templates
- Autosave avoids the risk of losing content
Clean HTML
Avoid spam filters or poor rendering in email clients with clean and compliant code
- Generates compliant HTML that’s mobile and desktop friendly
- Generate clean and compliant CSS-inlined HTML with Inline CSS, to ensure maximum email client compatibility
- Specify your target HTML schema to ensure compliance with email clients
- Strict control over the generated HTML with 20+ other content filtering options, including the ability to specify what elements are allowed and disallowed
- Use Accessibility Checker to ensure consistent and proper usage of alt tags and other flags spam filters look for
Instant Messaging
Empower users to communicate in real-time with features they know and love
- Increase efficiency with powerful and intuitive keyboard shortcuts
- Insert images, including animated GIFs with PowerPaste or drag-and-drop functionality
- Include rich content from Facebook, Twitter, YouTube and more with Enhanced Media Embed
- Convey emotion and tone with the Emoji Picker
- Let users share formatted code snippets with the Code Sample plugin
- Use Mentions to allow users to tag each other within chats
- Autosave avoids the risk of losing content
Quality Control
Avoid embarrassments and protect your brand integrity
- Eliminate broken links with Link Checker
- Build custom dictionaries to ensure content is on-brand with Spell Checker Pro and globally consistent spelling with simultaneous checking of up to 13 languages (plus medical terminology)
- Fix obvious (and not-so-obvious) mistakes before they see the light of day with Spelling Autocorrect
- Restrict font choices to only those available on popular email clients
- Optional Advanced Code Editor allows power users to make tweaks to HTML code where needed
- Maintain regulatory standards and avoid potential fines and lawsuits with Accessibility Checker (WCAG)
Image Management
Let your users easily upload and insert images into emails
Image Tools lets users apply 10 powerful transformations to their images, including crop, rotate, resize and other filters
Manage your files or images in the cloud with Tiny Drive:
- Upload and browse files, and insert images inside TinyMCE
- Import existing assets from any connected Google Drive or Dropbox account
- Minimal configuration, integrates seamlessly
- Secure – uses utilizes JSON Web Tokens (JWT)
- Scalable – uses Amazon S3 cloud storage
- Note: Tiny Drive is an add-on to TinyMCE
Internationalization
Enable users to send to anywhere in the world, from anywhere in the world
- 38 fully-vetted, professional UI translations
- 37 community-contributed UI translations
- 13 languages supported with Spell Checker Pro
See full demo | Discover integrations | Explore 60+ features
Ready to use TinyMCE for
your project?
Get a quoteHow TinyMCE is different from
the alternatives
Unmatched domain experience
Every day, the world’s biggest enterprise brands and growing startups rely on TinyMCE for their mission-critical editing needs. For the last two decades, we’ve consistently innovated to create the acknowledged best-in-class rich text editor, that lets developers and creators do more with less by providing:
- Smooth, lightweight code that achieves both speed and flexibility across every major browser
- A consistent and reliable release process, providing headache-free upgrades
- A reliable enterprise-grade editor that's easily customized and also available through an open-source license
- Reusable, modular components, 400+ APIs and 14+ framework integrations
Frameworks
12+ integrations and 400+ flexible APIs
Easily integrates into your tech stack. Enhances your editing experience. 7 first-party and 5 third-party endorsed integrations that make development easier.
Explore integrations →Hosting
Get TinyMCE two ways Cloud-based or Self-hosted
Get a Free API key to use TinyMCE from the Cloud or Download the SDK for use in your Self-Hosted application.
See how →Reliable, responsive and future-facing
Every day, our Engineering team solves issues the right way, our Product team encourages perfect results (even if launch dates occasionally slip) and the Customer Success team delivers support that’s reliable, fast and friendly. We’re proud of:
- Maintaining industry-leading response rates across dedicated SLAs
- 96% support ticket customer satisfaction* (Based on Zendesk ratings)
- 2.84 hr average response time* (August 2021 data)
Help when and where you need it
Enterprise-Grade Support
Responsive, in-house support to help you implement, customize and troubleshoot.
Learn more →Community
Thousands of questions and answers updated daily on StackOverflow and Github.
Browse questions →Documentation
Tutorials, quickstarts, code samples and videos to help you deploy faster.
Explore docs →Collaborative team that grows with you
We let companies focus on their core business, so they don’t have to worry about rich text editing. Product teams can delight their users and creators can work smarter, faster and more productively. Our modus operandi is to be:
- Helpful
- WYSIWYG and easy to work with
- Consultative, partnering with you throughout your stages of growth
- Champions of open source and the dev community who make it all possible
Modify TinyMCE to suit custom use cases
Modify TinyMCE to suit custom use cases
Developers have full source code control for endless customizations
- Out-of-the-box
- UI customization
- API customization
Looking for projects that
TinyMCE can be used for?
Access use-case specific starter configsto kickstart your rich text editing project
Related content
CHECKLIST
How to bypass the toughest spam filters
HOW-TO USE TINYMCE
Setting up the TinyMCE Email Starter config
PRODUCT-LED GROWTH
Email Marketing SaaS Must-Haves
HOW-TO USE TINYMCE
TinyMCE Email Starter Config Tour
WHITEPAPER
The Great Debate Buy vs Build Rich Text Editors
WHITEPAPER
The Opportunity Cost of Technical Debt
HOW-TO USE TINYMCE
How to add an emoji picker to the textarea
CASE STUDY
How Morning Brew saved its writers dozens of wasted hours per week with Tiny