<main>
  <section>
    <h1>Template Plugin: Created Date</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 inserting the current date and time when the template is used.</p>
    <p>There are two configuration options - one for the created date (when the template is added to TinyMCE) and
      one for modified date (which updates when the editor is reloaded - i.e. created, saved, and then edited again later.</p>
    <p>Refer to the <a href="https://www.tiny.cloud/docs/plugins/template/" target="_blank">documentation</a> for full
      details, specifically the template_cdate_classes/template_cdate_format and template_mdate_classes/template_mdate_format options.</p>
    <textarea></textarea>
    <p>Refer to the <a href="https://www.tiny.cloud/docs/plugins/insertdatetime/#referencedatetimeformats" target="_blank">Reference Date/Time formats</a>
      for the tokens to use to configure the <a href="https://www.tiny.cloud/docs/plugins/template/#template_cdate_format" target="_blank">template_cdate_format</a>
      and <a href="https://www.tiny.cloud/docs/plugins/template/#template_mdate_format" target="_blank">template_mdate_format</a> options.</p>
    <p>The target of the created/modified date can be configured with the <a href="https://www.tiny.cloud/docs/plugins/template/#template_cdate_classes" target="_blank">template_cdate_classes</a>
      and <a href="https://www.tiny.cloud/docs/plugins/template/#template_mdate_classes" target="_blank">template_mdate_classes</a> options.</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: 'Created Date example',
            description: 'When this template is inserted in to TinyMCE, the contents of any element with the "created-date" class will have its contents replaced the current time and date.',
            content: '<p><strong>Created: </strong><span class="created-date"><em>[auto-insert created date]</em></span></p>' +
                     '<p>The "[auto-insert created date]" above will be replaced with the current time and date when the template is used.</p>' +
                     '<p>Look at the "template_cdate_format" configuration option in the TinyMCE init call to change the format.</p>'
        }
    ],

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