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

7 min read

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.

The follow video tutorial gives an overview of the steps:

And here's the transcript:

Hey there it's John from tiny and i'm going to show you how to get started with tinymce's email starter config using the cloud apps like hubspot marketo topple dot io and sendpulse all use tinymce and their email builders to make sure that their users can create clean compliant and good looking emails after seeing how these apps have used tinymce we've come up with a starter config that anybody who's looking to build their own email builder or extend their own email builder with rich text lighting capabilities can use to get started in their app now before we get into it there is one thing to remember tinymce is not an email builder within itself it's the rich text editor that you can use in your email builder so if you are building a drag and drop email builder you need to make sure that you can build that functionality out and plug tiny mce in as the rich text editor for your rich text components the startup config contains a fake email builder layout and three tiny mc instances that you can take and build into your email builder to get started with the starter config head over to the link in the description and copy the starter config code into your app i'm just going to paste it in right here and you'll see a bunch of html some instructions and then the actual tinymce config script at the top here so now that i've added in i'm going to hit save and we'll see what happens you'll see when i go to edit one of the components of the email there's an error message that says that this domain is not registered with tiny cloud that's because in order to use tinymce in the cloud you need to register for an api key you can head on over to tiny.cloud and click on our pricing page to see all the plans that we have available with our free plan and any of our other plans you can sign up and get a 14 day free trial of all of the premium features used in the starter config now if you don't pay for a plan that's absolutely fine you can always use tinymce's free version you'll just have to remove the premium plugins from the starter config to make sure you don't get any errors once you've picked a plan and you've gone through the onboarding you'll be able to find your api key in your account screen so i'm going to go ahead and copy that api key and then head back over to the code in this script tag where it says no api key i'm going to paste in my api key save the file hit refresh and i'm good to go with no errors i have all the premium plugins like power paste spell checker pro advanced code formatting all available within the starter config learn more about all the features included in the starter config in the product tour video which i'll include in the description of this video you can start playing around with the starter config in your app by adding removing plugins changing the toolbar or modifying some of the options the starter config comes with comments that explain what each line in the config is doing and links to the relevant help articles once you've got the starter config set up within your email app you're going to want to set and get content from tinymce we have a great blog article on this that shows you exactly how to do it i'll include a link in the description as well now if you get stuck with tinymce you can always head on over to stack overflow where you can post your question to the community if you're in your 14 day trial or you're subscribed to a premium plan you have access to our enterprise grade professional support team which you can file a ticket with as well in coming videos we'll show more tips on email rich text editing best practices so stay tuned good luck

Configure the API key:

  1. Log into your account, and make sure you note your TinyMCE API key
  2. Create an index.html file
  3. Paste the config into your new file:
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Marketing email editor using inline mode</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    tinymce.init({
      selector: '.tinymce',
  </script>
</head>
  <body>
  </body>
<html>
  1. Replace the "your-api-key" string with your new API key from your account

Reconfigure the TinyMCE script

  1. Paste the following email app config in place of the <script> tags containing the default tinymce.init script:
<script>
 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'
        }
        ]
      }
      ]
    });
</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: #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;
    }
  </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 #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="<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" 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>
  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 reload editors in web app forms and refresh content

    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