14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

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

May 31st, 2022

9 min read

A Blue neon envelope representing email on a backdrop of arrows

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

You can also check on the following video to see the email starter config set up, and running.

And here's the transcript:

Hey there it's John from Tiny, and I'm going to show you how to get startedwith our email starter config with tinymce self-hosted loading premium plugins from the cloud TinyMCE is used by hubspot marketo b topple.io and many others for rich text editing in their email builders after seeing how these email platforms have used tinymce we've come up with a starter config that contains all the plugins and configuration options that are perfect for getting started with tinymc in your email project now you may be wondering why would I self-host TinyMCE and then load the premium plugins for the cloud well there's a couple of scenarios where this may come into play for example you may already be using TinyMCE and have it self-hosted and instead of switching everything to the cloud you may just want to load the premium plugins from the cloud on the other hand you may already have an app using tinymc self-hosted and maybe you're just looking to trial out some of the cloud features in the starter config without fully committing to a self-hosted premium plan either way it's super easy to set up now it's important to understand that TinyMCE offers the rich text editing capabilities that you can use within your email builder it's not the email builder itself that is to say TinyMCE doesn't let you drag and drop different elements within an email builder so you should know how to build an email builder or understand how and where you're going to include tiny mce within that builder okay let's get started head over to the link in the description below to get the starter config and paste it into your app you'll see a bunch of html some css and the config right here with comments to help you understand what each line of code is doing the starter config contains a fake sample app like i showed before so you'll want to take this and adapt it to the builder that you're creating i'm going to hit save and when i go to reload my page i have TinyMCE loading from the cloud but we want to load it from self-hosted and load the plugins from the cloud so the next step is to head on over to tiny dot cloud slash get tiny i'll include the link in the description and you're going to download the tiny mce sdk now this is downloading a zip file but you can also get tiny mce through your favorite package manager like npm composer nougat or yarn and we also have over 12 framework integrations that make tinymc really easy to integrate with your favorite framework like react angular view and others so i'm gonna take my zip file i just downloaded extract it and move it into my app so we should see a js folder there now with TinyMCE in it and i'm going to swap out where we load tinyemc from the cloud and load it from my local folder great so when i go to reload tinymc i shouldn't get that cloud error anymore okay this looks good no more errors but it's still not loading the premium plugins to load the premium plugins from the cloud we need to include another javascript file we have a good article on how to do this but for now i'm just going to copy this script tag and paste it right below where i included TinyMCE the way that TinyMCE loads the premium plugins is by using your api key so if you haven't signed up for TinyMCE yet head over to tiny.cloud and choose a plan or sign up for a 14-day free trial once you've signed up you'll have access to your account screen which will give you your api key copy this api key and paste it where it says no api key where we include the plugins i'm going to save the document and reload the page good so now you'll see tinymc has all the premium features included in the email starter config it's got spell checker advanced code editor and clean copy and paste if you want to learn more about the features included in the starter config we've put together a product tour of the email starter config and there's a link in the description below great now you're all set to modify the email starter config to your liking take a look at the code comments to better understand what each config option does and play around with the plugins toolbar and other settings to make it match your app once you've got the starter config set up the way you want it you're going to want to set and get content from TinyMCE there's a great article on our blog that talks about exactly how to do that i'll include the link in the description as well and of course if you ever get stuck head on over to stackoverflow where you can post a question and the community can help you answer it if you're on your 14 day free trial or you're part of one of our premium plans you also have access to our enterprise grade professional support team which can help you out with any configuration question well now you're all set in coming videos we'll put together more content about email rich text editing best practices good luck

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.

You may also see messages about read-only mode. Adding your TinyMCE API key to your configuration also prevents TinyMCE switching to read-only mode. Check on the docs for more information.

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>
<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>
        <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>
        </div>
  </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>
 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>
  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: #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. Copy the HTML content, and paste it into the body section of the index.html file:
<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 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 rich text editor 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 TinyMCEApr 28th, 2022

    How to set up TinyMCE from the cloud

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.