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

How to create an email app with TinyMCE Cloud

Joe Robinson

May 30th, 2022

Written by

Joe Robinson

Category

How-to Use TinyMCE

TinyMCE’s rich text editing capabilities have earned the trust of over 1.5 million developers. And if you’re building a platform to help design that irresistible email, you can quickly get TinyMCE up and running with TinyMCE Cloud.

This article explains Tiny Cloud for email app developers – using an email marketing software demo, it demonstrates how to get started including TinyMCE as your text editor.

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 you would find within the builder.

What you need to get started

First get your API key:

When you sign up for an account, and get your API key, you have 14 days FREE access to TinyMCE premium plugins. The free access activates when you use the key in your editor, and load it into a browser with premium plugins configured in the tiny.init script.

If you don’t have an API key or a TinyMCE account, you cannot access Premium Plugins, and the text area produces a warning message:

This domain is not registered with Tiny Cloud.  Please see the quick start guide or create an account

Using your API key, and registering your application’s URL, prevents these messages popping up in the text area.

How to start adding Tiny Cloud to your email app

These instructions show how to make a demo with TinyMCE from the cloud, using our purpose-built email starter config. It contains all of the plugins and features common to any market-leading email builder platform.

The demo contains three instances of TinyMCE, one for each rich text block. It’s meant to simulate how an email builder might layout an email. You can add as many instances as you like to your email builder without worrying about conflicts or errors (as mentioned, drag-and-drop functionality found in email builders is outside TinyMCE scope.)

This demo uses TinyMCE inline mode, and uses more than one text editor on the email app page.

Inline mode allows for the text editor to work with different HTML elements on a page, and keeps the toolbar hidden until it’s needed.

Configure the API key:

  1. Log into your account, and scroll down to the TinyMCE Installation heading. Copy the HTML starter code.
  2. Create an index.html file
  3. Paste the config into your new file:
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
  <textarea>
    Welcome to TinyMCE!
  </textarea>
  <script>
    tinymce.init({
      selector: 'textarea',
      plugins: 'advlist autolink lists link image charmap preview anchor pagebreak',
      toolbar_mode: 'floating',
    });
  </script>
</body>
</html>

Reconfigure the TinyMCE script

  1. Navigate to the email editor product page and copy the config.
  2. Paste the email app config (minus the surrounding HTML elements) in place of the <script> tags containing the default tinymce.init script copied from your account.
<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: () => {
                                    editor.insertContent(token.value);
                                }
                            }
                        });
                        callback(items);
                    }
                });
            },
        });
</script>

Add email app styling

  1. Create space after the script tags with the tinymce.init, and paste the following CSS content to style the email app:
<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. Update the HTML content with the demo email editor app HTML:

<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 #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="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" 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>
  1. Save the changes, and load the app in a browser:

TinyMCE Cloud running the email messaging app

More information for email app 

Check on our email editor page for further information, and remember that your FREE API key grants access to Premium Plugin functionality for 14 days, after which you will need to either choose a premium plan or remove TinyMCE premium features.

What you get from TinyMCE’s Premium Plugins

  • 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

Sign up today to try these Premium Plugins in your email editor

Contact us for more information if you have any questions on adding TinyMCE to your email app. Premium customers and anyone on a 14-day free trial has access to our enterprise-grade professional support team.

Email MarketingHTMLWYSIWYGTiny 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