<center>
  <table style="width: 100%; max-width: 600px; padding: 20px;">
    <tr>
      <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>
          <ul>
            <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>
          </ul>
        </div>
      </td>
    </tr>
  </table>
</center>

// 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}}" }
];

tinymce.init({
  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.
  toolbar:
    "mergetags bold italic strikethrough backcolor | bullist numlist link | tokens",
  //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'
        },
       ]
     },
  ],

});