Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to make your email app: Self-hosted with TinyMCE Cloud

Joe Robinson

May 31st, 2022

Written by

Joe Robinson

Category

How-to Use TinyMCE

For the devs who (behind the scenes) make email work, there’s a lot of different configurations to control and manage.

However, control over email and its dependencies shouldn’t be something that software developers have to think about too much. This is where TinyMCE can provide support.

TinyMCE’s rich text editing capabilities have earned the trust of over 1.5 million developers. If you’re already familiar with TinyMCE through self-hosting, you may be looking for more control and expansion by adding Premium Plugins through Tiny Cloud.

Or, if you want extra control with a self-hosted deployment of TinyMCE, and want to try out Tiny Cloud, it’s possible to configure both. Either way, A hybrid approach is exactly what you need.

This article explains how a hybrid approach works for email app developers – using a demo email builder app as a demo. The demo uses the TinyMCE Email starter config, which contains all of the plugins and features common to a market-leading email builder platform.

It’s important to note that like other rich text editors, TinyMCE doesn’t provide the drag-and-drop functionality that many email builders employ – rather, it provides the rich text editing capabilities that you’d find within the builder.

Getting started with an email builder app

To leverage TinyMCE Cloud Premium Plugins, you’ll need an API key.

To get your API key:

The email editor config:

  • Check on the email editor starter config for TinyMCE to find the code snippet you need to get started

Finding your FREE API key

Log into your TinyMCE account. Check out the top section of the page as it loads. The API key shown there gives you 14 days FREE access to TinyMCE premium plugins. The free trial begins when you use the key in your editor, and load it into a browser with premium plugins configured in the tiny.init script.

Create your demo email editor project

The demo email editor mimics the UI of an email design app. It includes a combination of TinyMCE Cloud and Self-hosted premium plugins. Adapt these instructions to add TinyMCE to your existing or new email editor. As mentioned previously, the common drag-and-drop functionality found in email builders is outside the scope of TinyMCE.

To get started:

  1. Set up a folder inside your workstation environment, and include an index.html file inside it.
  2. Copy the following email editor demo HTML into your index file.
<!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">
        <link rel="stylesheet" href="style.css">
        <title>Email editor with TinyMCE</title>
<body>
        <div class="wrapper">
      <header class="main-head">The header</header>
            <nav class="main-nav">
                <ul>
                    <li><a href="">Nav 1</a></li>
                    <li><a href="">Nav 2</a></li>
                    <li><a href="">Nav 3</a></li>
                </ul>
            </nav>

            <article class="content">
            </article>

            <aside class="side">Sidebar</aside>
            <footer class="main-footer">The footer</footer>
        </div>

        </body>
    </body>
</html>

Download and configure the TinyMCE Self-Hosting file

  1. Go to the TinyMCE get Tiny page
  2. Click on the Download TinyMCE SDK Now button
  3. When the Download is finished, unzip the .zip file, and move it into the same folder directory as your demo email app
  4. Reference TinyMCE with a script tag, specifying the source of the TinyMCE Self-Host folder you unzipped and added to your project:
<script src="/tinymce/js/tinymce/tinymce.min.js"></script>;

Configure the CDN link and API key 

  1. Head to the Email and Message Solution page
  2. Copy the config tinymce.init script from the page, and paste it into the head section of your index.html file:
<script>
        var tokens = [
            { text: "name.first", value: "{{name.first}}" },
            { text: "name.last", value: "{{name.last}}" },
            { text: "name.full", value: "{{name.full}}" },
            { text: "email.home", value: "{{email.home}}" },
            { text: "email.work", value: "{{email.work}}" },
        ];

        tinymce.init({
            selector:'.tinymce',
            inline: true,
            plugins: 'link lists image emoticons advcode editimage linkchecker powerpaste',
            toolbar: 'styles | bold italic forecolor backcolor link image emoticons tokens | align bullist numlist | code removeformat',
            menubar: false,
            link_target_list: false,
            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...",
            toolbar_mode: "wrap",
            noneditable_regexp: /\{\{[^\}]+\}\}/g,
            setup: (editor) => {
                editor.ui.registry.addIcon('token', '<svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>"><path d="m0 0h24v24h-24z" fill="none"/><path d="m21 12-4.37 6.16c-.37.52-.98.84-1.63.84h-3v-2h3l3.55-5-3.55-5h-10v3h-2v-3c0-1.1.9-2 2-2h10c.65 0 1.26.31 1.63.84zm-11 3h-3v-3h-2v3h-3v2h3v3h2v-3h3z"/></svg>');
                editor.ui.registry.addMenuButton("tokens", {
                    icon: "token",
                    tooltip: "Insert token",
                    fetch: (callback) => {
                        var items = tokens.map((token) => {
                            return {
                                type: "menuitem",
                                text: token.text,
                                onAction: () => {
                                    // Insert content at the location of the cursor.
                                    // https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.editor/#insertContent
                                    editor.insertContent(token.value);
                                }
                            }
                        });
                        callback(items);
                    }
                });
            },
        });
    </script>
  1. Head to your TinyMCE account, and copy the example CDN script
  2. Paste the CDN script before the tinymce.init script in your index.html file
<script
  src="https://cdn.tiny.cloud/1/api-key-goes-here/tinymce/6/plugins.min.js"
  referrerpolicy="origin"
></script>;
  1. Save the changes

Note: If you’re not developing on localhost, you’ll need to whitelist your domain inside your Tiny.cloud account screen

Configure the email app interface

  1. Copy the style tag content from the email config, and paste it into your index.html file after the tinymce.init content:
<style>
    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: #fff;
       height: 42px;
       padding-top: 48px;
       border-bottom: 1px solid rgba(0, 0, 0, .1);
        }

    .tinymce:focus {
       border-radius: 0.5px;
       box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
       outline: 0;
        }

    .mceNonEditable {
       background-color: #e7ecff;
       padding: 1px 0;
       color: #4059b3;
       font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.9375em;
        }
</style>
  1. Copy the HTML content, and paste it into the body section of the index.html file:
<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 #dfe3ec; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
                        <tr>
                            <td style="padding: 16px 64px 0;">
                                <div class="tinymce" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
                                    <p>Hey {{first.name}}</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 Mailchimp) 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="<a href="https://tiny.cloud/pricing">https://tiny.cloud/pricing</a>">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" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
                                                <p><img src="<a href="https://img.icons8.com/doodle/96/000000/critical-thinking.png">https://img.icons8.com/doodle/96/000000/critical-thinking.png</a>" 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" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
                                                <p><img src="<a href="https://img.icons8.com/doodle/96/000000/electrical--v1.png">https://img.icons8.com/doodle/96/000000/electrical--v1.png</a>" 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>
  1. Save the changes, and load the demo in your browser:

TinyMCE with an email editor working in the browser with self host and TinyMCE Cloud

Need more email editor information?

Read through the email editor page to find out more information. The email starter config that’s available comes  with and without comments in the HTML, to explain what each aspect of TinyMCE is doing.

Signing up for a FREE API key gives you access to Premium Plugin functionality for 14 days before you need to consider using the Core plan without premium plugins, or signing up for one of the TinyMCE Paid plans.

And, while you’re in your 14-day free trial period (or after you’ve signed up for a paid plan), you can contact support if you have any questions on adding TinyMCE to your email app.

 

To get TinyMCE’s PowerPaste, Enhanced Image Editing, Spell Checker Pro and Link Checker Premium Plugins, and make use of these benefits:

  • Error-free copy-paste from Word, Excel, and Google Docs with PowerPaste

  • Images editing, including crop, rotate, resize, and other filters with Enhanced Image Editing

  • Error-free emails with Spell Checker Pro and Link Checker

  • Over 45 other features to make your emails stand out

Self HostingEmail MarketingConfigurationTiny Cloud
byJoe Robinson

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.

Related Articles

  • How-to Use TinyMCE

    How to set up a CMS editor with TinyMCE Cloud

    by Joe Robinson in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing