<main>
  <section>
    <h1>Noneditable class: Letters Example</h1>
    <p>This is an example of the <a href="https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#noneditable_class" target="_blank">noneditable</a>
      class option combined with the <a href="https://www.tiny.cloud/docs/tinymce/6/template/" target="_blank">template plugin</a>
      to demonstrate how parts of templates can be made noneditable.</p>
    <textarea></textarea>
    <p>For this example, the template source is within the TinyMCE init configuration. This makes it easier to
      play with the example. In a real-world use case, you may like to use <a href="https://www.tiny.cloud/docs/tinymce/6/advanced-templates/" class="_blank">TinyMCE's Advanced Templates plugin</a> and host your templates within your database</p>
  </section>
</main>

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

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

section {
  margin-bottom: 3rem;
}

h1 {
  font-size: 1.75rem;
  font-weight: bold;
}

a {
  color: rgb(25, 118, 210);
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: rgb(145, 180, 225);
}

tinymce.init({
  selector: "textarea",
  plugins: "template code",
  toolbar: "template code",
  menubar: false,
  noneditable_class: 'nonedit',

  min_height: 380,
  templates: [
    {
      title: "Letter Example: Approve Change",
      description: "An example letter to approve a requested change.",
      content:
        "<p>Thank you for your change request.</p>" +
        "<p>We are happy to inform you that your request has been fully approved.</p>" +
        '<p class="nonedit">Please note that this change may take up to 24 hours to appear on your account.</p>'
    },
    {
      title: "Letter Example: Reject Change",
      description:
        "An example letter to inform of a rejected requested change.",
      content:
        "<p>Thank you for your change request.</p>" +
        "<p>Unfortunately at this time, we cannot approve this request.</p>" +
        '<p class="nonedit">Please contact the customer care team for further assistance.</p>' +
        "<p>You can create a new change request if you would like to apply again.</p>"
    }
  ],

});