<main>
  <section>
    <h1>Template Plugin: Replace Values</h1>
    <p>This is an example of the <a href="https://www.tiny.cloud/docs/plugins/template/" target="_blank">template</a> plugin
      in TinyMCE 5 using placeholders to <a href="https://www.tiny.cloud/docs/plugins/template/#template_replace_values" target="_blank">replace values</a>.</p>
    <textarea></textarea>
    <p>For this example, the template source and the replacement values are all in the TinyMCE init configuration.
      This will make 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/plugins/template/#templates" class="_blank">externally
        hosted templates</a>, plus update your init configuration to pull in dynamic replace values.</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",
  toolbar: "template",
  menubar: false,

  min_height: 380,
  templates: [
    {
      title: "Replace Values template example",
      description:
        "This template has placeholder variables that will be replaced when this template is inserted in to TinyMCE.",
      content:
        "<p>Congratulations {$owner_name}!</p>" +
        "<p>Our voting panel have agreed that {$cat_name} is definitely the {$category} cat out there.</p>" +
        "<p>We loved seeing your photo, and will be sharing on our social media channels.</p>" +
        "<p>Keep {$cat_name} being the {$category} cat - we know you will!</p>" +
        '<p>Regards,<br>The 2020 Voting Panel<br><span class="created-date" style="font-size:0.7rem;">[created date]</span></p>'
    }
  ],

  template_replace_values: {
    owner_name: "Marty",
    cat_name: "Toby",
    category: "Most Handsome"
  },

  template_cdate_classes: "created-date",
  template_cdate_format: "%A %d %B %Y"
});

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