<main>

  <textarea id="editor">
    <p>Hi [[Contact.FirstName]],</p>
    <h2>What's your CRM editor project?</h2>
    <p>Are you:</p>
    <ul>
      <li>Building a new CRM and need to add rich text editing capabilities?</li>
      <li>Extending your existing CRM and need a more extensive rich text editor?</li>
    </ul>
    <p>Then use the only WYSIWYG CRM editor that&rsquo;s trusted by 1.5M devs.</p>
    <p><strong>Curious about TinyMCE? </strong>Play with this demo to see how our CRM editor works 😊</p>
    <p>Press <img src="https://tiny.cloud/images/solutions/crm-editor/demo/i_formatting.png" width="18" height="18" alt="Formatting">&nbsp;to see how a toolbar group works, and click on <img src="https://tiny.cloud/images/solutions/crm-editor/demo/i_insert_template.png" width="18" height="18" alt="Insert Template"> and <img src="https://tiny.cloud/images/solutions/crm-editor/demo/i_insert_token.png" width="18" height="18" alt="Insert Token"> for inspiration to include pre-defined templates and merge tags.</p>
  </textarea>
</main>

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-size: 14px;
  margin: 2rem;
}

main {
  max-width: 800px;
  margin: auto;
}

tinymce.init({
  selector: "#editor",
  plugins:
    "autoresize lists link emoticons image editimage advcode linkchecker powerpaste tinymcespellchecker template mergetags autoresize",
  menubar: false,
  toolbar:
    "mergetags | undo redo spellchecker | formatgroup | link emoticons image template | code",
  toolbar_location: "bottom",
  statusbar: false,
  toolbar_groups: {
    formatgroup: {
      icon: "format",
      tooltip: "Formatting",
      items:
        "blocks fontfamily fontsize | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote"
    }
  },

  //CRM - streamlined

  //Autoresize settings
  autoresize_overflow_padding: 20,
  max_height: 500,
  autoresize_bottom_margin: 50,

  //CRM - strict formatting

  //Text Formatting options
  font_size_formats: "8px 10px 12px 14px 18px",
  formats: {
    h1: { block: "h1" },
    h2: { block: "h2" },
    p: [{ block: "p" }, { selector: "p" }],
    small: { block: "small", styles: { fontSize: "12px", color: "#aaaaaa" } }
  },
  block_formats: "Normal=p; Heading=h1; Sub heading=h2; Small=small",

  //Image
  image_file_types: "jpeg jpg png gif",

  //Powerpaste setup
  powerpaste_word_import: "clean",
  powerpaste_googledocs_import: "clean",
  powerpaste_html_import: "clean",

  // Text Formatting Options
  font_size_formats: "8px 10px 12px 14px 18px",
  formats: {
    h1: { block: "h1" },
    h2: { block: "h2" },
    p: [{ block: "p" }, { selector: "p" }],
    small: { block: "small", styles: { fontSize: "12px", color: "#aaaaaa" } }
  },
  block_formats: "Normal=p; Heading=h1; Sub heading=h2; Small=small",
  forced_root_block: "p",
  forced_root_block_attrs: {
    style: "font-size: 14px; font-family: helvetica, arial, sans-serif;"
  },

  //CRM - Templates
  templates: [
    {
      title: "Outbound email",
      description: "Outbound cold email for prospects",
      content:
        '<p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Hi [[Contact.FirstName]],</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">My name is [[Sales.FirstName]] with [[Sales.Org]].</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">We help companies just like yours securely store data in the cloud. I wanted to learn how you handle data storage at [[Contact.Org]] and show you some of the exciting technology we\'re working on.</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Are you available for a quick call tomorrow afternoon?</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">[[Sales.FirstName]]</p>'
    },
    {
      title: "Follow-up email",
      description: "Follow-up to be sent immediately after discovery meetings",
      content:
        '<p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Hi [[Contact.FirstName]],</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Thank you for taking the time to explore a potential partnership today! It felt like our product could help you solve some of the issues that you&rsquo;re having within [[Contact.Org]], especially in these areas:</p><ul><li style="font-size: 14px; font-family: helvetica, arial, sans-serif;">The offsite data warehouse will allow you to guarantee business continuity</li><li style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Metered usage will ensure you only pay for what you consume</li><li style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Level III security protocols will mean you will meet security requirements for your jurisdiction</li></ul><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">I understand that now you will discuss and agree internally on the next step. Please let me know if you have any questions or if there is anything I can do to help. If not, I&rsquo;ll talk to you next week.</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Best,<br>[[Sales.FirstName]]</p>'
    }
  ],

  //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"
        },
        {
          value: "Contact.Org",
          title: "Contact Organization"
        }
      ]
    },
    {
      title: "Business",
      menu: [
        {
          value: "Sales.FirstName",
          title: "Sales First Name"
        },
        {
          value: "Sales.Org",
          title: "Sales Organization"
        }
      ]
    }
  ],

  //CRM - Productivity

  //Link content
  link_title: false,
  link_target_list: false,
  link_target_list: false,
  link_list: [
    { title: "{productname} Product demo", value: "https://www.tiny.cloud/" },
    {
      title: "{pricingname} Pricing",
      value: "https://www.tiny.cloud/pricing/"
    },
    { title: "{signupname} Sign up", value: "https://www.tiny.cloud/signup/" },
    {
      title: "{casestudies} Case studies",
      value: "https://www.tiny.cloud/solutions/content-authoring-tool/",
      caseStudies: [
        {
          title: "{productname} Study1",
          value: "https://www.tiny.cloud/solutions/crm-editor/"
        },
        {
          title: "{productname} Study2",
          value: "https://www.tiny.cloud/solutions/dms-editor/"
        },
        {
          title: "{productname} Study3",
          value: "https://www.tiny.cloud/solutions/wysiwyg-email-editor/"
        }
      ]
    }
  ],

  //Spellchecker languages
  spellchecker_language: "en_US",

  //Content Style
  content_style: `
        body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
          font-size: 14px;
          line-height: 1.5rem;
        }

        h1 {
          font-size: 24px;
        }

        h2 {
          font-size: 18px;
        }
      `
});