<table style="width: 100%; max-width: 600px; padding: 20px;">
      <td style="background-color: #eeeeee; font-size: 14px; padding: 16px; font-family: Verdana, Geneva, sans-serif; border-radius: 25px;">
        <div id="editable">
          <h1>Hello <span class="mceNonEditable" contenteditable="false">{{Contact.FirstName}}</span>!</h1>
            <li>Merge tags are added when the prefix "{{" is typed in.</li>
            <li>Try editing a token - it cannot be modified, although it can be deleted, as expected. It is non-editable by default.</li>
// An array containing the available tokens.
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}}" }

  selector: "#editable",
  inline: true,
  menubar: false,
  // Tip! To make TinyMCE leaner, only include the plugins you actually need.
  plugins: "mergetags autoresize code link lists noneditable",

  // We have put our custom insert token button last.
    "mergetags bold italic strikethrough backcolor | bullist numlist link | tokens",
  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'


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js