<main>
    <section>
        <h1>Template Plugin: Selected Content Replacement</h1>
        <p>This is an example of replacing selected content within the TinyMCE editor with content from the <a href="https://www.tiny.cloud/docs/plugins/template/" target="_blank">template</a> plugin in TinyMCE 5.</p>
        <textarea>
            <p>Content authors can write their content in the editor, and they may need to insert a button with a specific label.</p>
            <p>All they need to do is write the label, select the label text, and insert the template. Their selected content will be inserted in to element with the class "template_selected_content_classes" within the template they select.</p>
            <p>New Button Label</p>
            <p>Select the line above, and click the "Insert Template" button in the template. There is only one template, so that will be pre-selected - just click Save. You will see the line above be replaced with the template, and the selected content be inserted in to the template.</p>
        </textarea>
        <p>For this example, the template source is within 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>.</p>
        <p>Refer to the <a href="https://www.tiny.cloud/docs/plugins/template/#template_selected_content_classes" target="_blank">template_selected_content_classes</a> documentation for further details.</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,

  content_css: [
    "//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css",
    "https://assets.codepen.io/413052/templates-replace-selection-content.css"
  ],

  min_height: 380,
  templates: [
    {
      title: "Replace content template",
      description:
        "This template includes a styled button, and the label of the button will be replaced on insert.",
      content:
        '<button class="button">' +
        '<span class="icon">' +
        '<i class="fas fa-check" aria-hidden="true">&nbsp;</i>' +
        "</span>" +
        '<span class="content-replacement">[selected content will insert here]</span>' +
        "</button>"
    }
  ],

  template_selected_content_classes: "content-replacement"
});