<div class="container">
  <div class="toolbar"></div>
  <div class="email">
    <table style="background-color: #f9f9fb; width: 100%;" 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="https://tiny.cloud/pricing">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>
<button id="inline-css">Get Inline CSS</button>

/* Page and email layout */
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;
}

/* Add blue "focus" effect to the active editor */
.tinymce:focus {
  border-radius: 0.5px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
  outline: 0;
}

/* TinyMCE toolbar tweaks */

/* Style the toolbar */
.toolbar {
  background-color: #f9f9fb;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 auto;
  max-width: 660px;
  border-radius: 10px;
}

/* On tablet and larger devices, show a toolbar placeholder when
      there is no active editor selected (the editor loses focus).
      This is a screenshot of the toolbar, but with a "disabled"
      grey affect applied to the buttons to indicate they are not
      active. If you change the toolbar layout, create a screenshot.
      Alternatively, you could remove this CSS rule and make the
      toolbar disappear when the editor loses focus. */
@media screen and (min-width: 768px) {
  .toolbar {
    height: 42px;
    min-height: 82px;
    outline: 2px solid #eee;
    outline-offset: -2px;
    background: url("https://i.ibb.co/GM53SBk/disabled-toolbar-tutorial.png")
      no-repeat center center / contain;
  }
}

/* Ensure that when empty space on the toolbar is clicked, it does not blur the editor */
.tox-toolbar__group:last-of-type {
  flex-grow: 1;
}

tinymce.init({
  // Specify which element(s) to make editable - these are all of our editable
  // areas within the email
  selector: ".tinymce",

  // Tip - To make TinyMCE leaner, only include the plugins you actually need
  plugins:
    "advcode a11ychecker autocorrect autolink editimage emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker typography",

  // This option allows you to specify the buttons and the order that they
  // will appear on TinyMCE’s toolbar.
  // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#basic-toolbar-options
  toolbar:
    "undo redo | styles | bold italic forecolor | link image emoticons mergetags | align bullist numlist | spellchecker a11ycheck typography | code removeformat",

  // Toolbar_mode controls how the toolbar behaves when toolbar buttons do not
  // fit on one row. Wrap displays all toolbar buttons wrapped over multiple rows
  // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#toolbar_mode
  toolbar_mode: "wrap",

  // Render the inline toolbar into an element at the top of the email editor
  // https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
  fixed_toolbar_container: ".toolbar",

  // Toggle the menubar off to get a leaner visual experience
  // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
  menubar: false,

  // Enable inline mode
  // https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
  inline: true,

  // Once TinyMCE loads, focus on the first editable area so the toolbar is shown
  // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#auto_focus
  auto_focus: "editor-1",

  // An inline editor is "invisible" when there are no content in the editor
  // Make sure to use the placeholder option to show the user where to write
  // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
  placeholder: "Write here...",

  // Only allow certain image types to be added to emails
  // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
  images_file_types: "jpeg,jpg,png,gif",

  // We don't want users to be able to resize images by using
  // drag and drop because it can break layout templates.
  // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
  object_resizing: false,

  // In emails we rarely use target for links so we hide the
  // target drop down in the link dialog
  // https://www.tiny.cloud/docs/tinymce/6/link/#link_target_list
  link_target_list: false,

  // The formats option is where custom formatting options are defined.
  // In this case we define a couple of headings and a button appearance
  // for links. HTML Emails require inlining the CSS. Fortunately the
  // styles property makes that easy.
  // https://www.tiny.cloud/docs/tinymce/6/content-formatting/
  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"
      }
    }
  },

  // The style_formats option controls the styleformat toolbar button menu
  // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats
  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" }
  ],

  // Merge Tags lets users add non-editable personalization tokens to your content, so your
  // app can then merge the personalized content into emails before sending
  // https://www.tiny.cloud/docs/tinymce/6/mergetags/
  mergetags_prefix: "${",
  mergetags_suffix: "}",
  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"
        }
      ]
    }
  ],

  // A common feature for email marketing tools is to provide a prepopulated
  // list of links to choose. Here we define that list.
  // https://www.tiny.cloud/docs/tinymce/6/link/#link_list
  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/" }
  ],

  // Spell Checker Pro options
  // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
  // Set the default language
  spellchecker_language: "en_US",
  // Set Spell Checker Pro to be active when the editor loads
  spellchecker_active: true,
  // Add brand terms or other words to ignore
  spellchecker_ignore_list: {
    en_US: ["tinymce", "TinyMCE"]
  },

  //Accessibility Checker
  //set 'aa' level for email WCAG appliance
  a11ychecker_level: "aa",

  // Advanced Typography
  // Set the default language
  typography_default_lang: "en-US"
  // You can also specify the exact typographic rules to check for using typography_rules
});

function inlineCSS() {
  const pluginAPI = tinymce.get(0).plugins.inlinecss;
  pluginAPI.getContent().then((content) => {
    console.log(content.html);
  });
}

var buttonLine = document.getElementById("inline-css");
buttonLine.addEventListener("click", inlineCSS, false);