Templates plugin

<textarea id="readonly-locked-template">
  <h3 style="font-size: 1.5em; margin: 20px 0;">Working with Templates</h3>

  <h4 style="font-size: 1.25em; margin: 15px 0;">Inserting a template</h4>
  <p style="margin: 10px 0;">To insert a template:</p>
  <ol style="margin-left: 20px;">
    <li>Click the <strong>Insert template</strong> toolbar button or select <strong>Insert template...</strong> from the <strong>Insert</strong> menu.</li>
    <li>In the <strong>Templates</strong> dialog, you'll see different categories:
      <ul style="margin-left: 20px;">
        <li>Regular categories with editable templates</li>
        <li>Locked categories (marked with a 🔒 icon) containing read-only templates</li>
      </ul>
    </li>
    <li>Select any template to preview its content.</li>
    <li>Click <strong>Insert</strong> or press <strong>Return</strong> to add the template to your document.</li>
  </ol>
  
  <div style="margin: 15px 0; padding: 10px 15px; border-left: 4px solid #3498db; background-color: #f0f7fb;">
    <p><strong>Note:</strong> Templates in locked categories cannot be modified, but they can still be inserted into your document.</p>
  </div>
  
  <h4 style="font-size: 1.25em; margin: 15px 0;">Adding a new template</h4>
  <p style="margin: 10px 0;">To add a new template:</p>
  <ol style="margin-left: 20px;">
    <li>Select the content in your document that you want to save as a template.</li>
    <li>Click the <strong>Save as template</strong> toolbar button or select <strong>Save as template…</strong> from the <strong>Tools</strong> menu.</li>
    <li>In the <strong>New template</strong> dialog:
      <ol style="margin-left: 20px;">
        <li>Enter a name for your template in the <strong>Template name</strong> field.</li>
        <li>Choose a category from the <strong>Category</strong> dropdown menu.
          <div style="margin: 15px 0; padding: 10px 15px; border-left: 4px solid #e74c3c; background-color: #fdf7f7;">
            <p><strong>Important:</strong> Locked categories (marked with a 🔒 icon) are read-only. You cannot save new templates to these categories.</p>
          </div>
        </li>
        <li>Click <strong>Save</strong> or press <strong>Return</strong>.</li>
      </ol>
    </li>
  </ol>
  
  <h4 style="font-size: 1.25em; margin: 15px 0;">Managing Templates</h4>
  <p style="margin: 10px 0;">When working with templates, keep in mind:</p>
  <ul style="margin-left: 20px;">
    <li>Templates in regular categories can be edited, renamed, or deleted.</li>
    <li>Templates in locked categories (🔒) are read-only and cannot be:
      <ul style="margin-left: 20px;">
        <li>Modified or renamed</li>
        <li>Deleted</li>
        <li>Moved to different categories</li>
      </ul>
    </li>
  </ul>
</textarea>

const headers = {
  'Accept': 'application/json',
  'Content-Type': 'application/json',
};

const handleResponse = (message) => (response) => {
  if (!response.ok) {
    return response.text().then((error) => {
      console.error(error);
      throw new Error(message);
    });
  }
  return response.json();
};

const advtemplate_list = () =>
  fetch('/categories', {
    method: 'GET',
    headers,
  }).then(handleResponse('Failed to get template list'));

const advtemplate_get_template = (id) =>
  fetch(`/templates/${id}`, {
    method: 'GET',
    headers,
  }).then(handleResponse('Failed to get template'));

const advtemplate_create_category = (title) =>
  fetch('/categories', {
    method: 'POST',
    body: JSON.stringify({ title }),
    headers,
  }).then(handleResponse('Failed to create category'));

const advtemplate_create_template = (title, content, categoryId) =>
  fetch('/templates', {
    method: 'POST',
    body: JSON.stringify({ title, content, categoryId }),
    headers,
  }).then(handleResponse('Failed to create template'));

const advtemplate_rename_category = (id, title) =>
  fetch(`/categories/${id}`, {
    method: 'PUT',
    body: JSON.stringify({ title }),
    headers,
  }).then(handleResponse('Failed to rename category'));

const advtemplate_rename_template = (id, title) =>
  fetch(`/templates/${id}`, {
    method: 'PUT',
    body: JSON.stringify({ title }),
    headers,
  }).then(handleResponse('Failed to rename template'));

const advtemplate_delete_template = (id) =>
  fetch(`/templates/${id}`, {
    method: 'DELETE',
    headers,
  }).then(handleResponse('Failed to delete template'));

const advtemplate_delete_category = (id) =>
  fetch(`/categories/${id}`, {
    method: 'DELETE',
    headers,
  }).then(handleResponse('Failed to delete category'));

const advtemplate_move_template = (id, categoryId) =>
  fetch(`/templates/${id}`, {
    method: 'PATCH',
    body: JSON.stringify({ categoryId }),
    headers,
  }).then(handleResponse('Failed to move template'));

const advtemplate_move_category_items = (id, categoryId) =>
  fetch(`/categories/${id}`, {
    method: 'PATCH',
    body: JSON.stringify({ categoryId }),
    headers,
  }).then(handleResponse('Failed to move all templates to new category'));

tinymce.init({
  selector: 'textarea#readonly-locked-template',
  plugins: [
    'advlist', 'anchor', 'autolink', 'charmap', 'code', 'fullscreen',
    'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
    'preview', 'searchreplace', 'table', 'visualblocks', 'advtemplate'
  ],
  contextmenu: 'advtemplate',
  toolbar: 'addtemplate inserttemplate | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

  advtemplate_list,
  advtemplate_get_template,
  advtemplate_create_category,
  advtemplate_create_template,
  advtemplate_rename_category,
  advtemplate_move_category_items,
  advtemplate_delete_category,
  advtemplate_rename_template,
  advtemplate_move_template,
  advtemplate_delete_template,
});

<textarea id="template-insertionpoint">
<h3>Using the Insertion Point Marker with Templates (and Merge Tags)<h3>

<h4>To insert a template</h4>
 <ol>
  <li>
    Select <strong>Template…</strong> from the <strong>Insert</strong> menu or<br />
    select the <strong>Insert template</strong> toolbar button.
  </li>
  <li>
  Select the template to add to the TinyMCE document from the <strong>Templates</strong> dialog that presents.
    <ol>
      <li>
      Click the <strong>Without an insertion point marker</strong> category to see and select a template that does not use the <code>{{mce-cursor}}</code> insertion point marker.
      </li>
      <li>
      Click the <strong>With an insertion point marker</strong> category to see and select a template that does use the <code>{{mce-cursor}}</code> insertion point marker.
      </li>
    </ol>
  </li>
<li>click <strong>Insert</strong> or press <strong>Return</strong>.</li>
</ol>

<h4>Noting the difference</h4>

<p>The <em>Name entry prompt</em> template without the <code>{{mce-cursor}}</code> insertion point marker, places the insertion point at the end of the template text.</p>

<p>By contrast, the <em>Name entry prompt</em> template with the <code>{{mce-cursor}}</code> insertion point marker places the insertion point at the right spot for someone to enter their name, as requested.</p>

<p>Similarly, the <em>Letter outline</em> template without the <code>{{mce-cursor}}</code> insertion point marker, places the insertion point at the end of the template text.</p>

<p>And, by equivalent contrast, the <em>Letter outline</em> template with the <code>{{mce-cursor}}</code> insertion point marker places the insertion point at the right spot for someone to start writing a letter.</p>

<h4>Working with Merge Tags</h4>

<p>The second pre-defined template in this demonstration — the <em>Letter outline</em> template — shows the <code>{{mce-cursor}}</code> string working in conjunction with the <a href="https://tiny.cloud/docs/tinymce/6/mergetags/">Merge Tags</a> Premium plugin.</p>

<p>The fixed string that is the Insertion Point Marker uses the same delimiting characters as are used by default by the Merge Tags plugin.</p>

<p>The <strong>Merge Tags</strong> plugin knows nothing about the <code>{{mce-cursor}}</code> being a marker string for the <strong>Templates</strong> plugin. And, if this particular string was used in a Merge Tags configuration, the <strong>Merge Tags</strong> plugin would recognise it and substitute it with whatever contents it was set to substitute, as expected.

<p>The <strong>Templates</strong> plugin removes the Insertion Point Marker before inserting a template containing the string in to a TinyMCE instance, however.</p>

<p>Consequently the <strong>Templates</strong> insertion point marker string is never seen by the <strong>Merge Tags</strong> plugin.</p>

</textarea>

tinymce.init({
  selector: "textarea#template-insertionpoint",
  plugins: [ "advtemplate", "mergetags", ],
  toolbar: "inserttemplate | mergetags",
  advtemplate_templates: [
    {
      title: 'Without an insertion point marker',
      items: [
        {
          title: 'Name entry prompt',
          content: '<p><strong>Enter your name:</strong></p><p><em>Include both your given and family names, in your preferred order.</em></p>'
        },
        {
          title: 'Letter outline',
          content: '<p>{{Current.Date}}</p><p>{{Honorific}} {{Person.Name.Last}},</p><p></p><p>&nbsp;</p><p>Regards,</p><p>{{staff.digital.signature}}</p><p>{{Staff.Name}}</p><p>{{Staff.Email}}</p>'
        },
      ],
    },
    {
      title: 'With an insertion point marker',
      items: [
        {
          title: 'Name entry prompt',
          content: '<p><strong>Enter your name:</strong>{{mce-cursor}}</p><p><em>Include both your given and family names, in your preferred order.</em></p>'
        },
        {
          title: 'Letter outline',
          content: '<p>{{Current.Date}}</p><p>{{Honorific}} {{Person.Name.Last}},</p><p>{{mce-cursor}}&nbsp;</p><p>Regards,</p><p>{{staff.digital.signature}}</p><p>{{Staff.Name}}</p><p>{{Staff.Email}}</p>'
        },
      ],
    },
  ],
  mergetags_list: [
    {
      value: 'Current.Date',
      title: 'Current date in DD/MM/YYYY format'
    },
    {
      value: 'Current.Time',
    },
    {
      value: 'Honorific',
    },
    {
      title: 'Person',
      menu: [
        {
          value: 'Customer.Name.Given',
          title: 'customer first name'
        },
        {
          value: 'Customer.Name.Family',
          title: 'customer family name'
        },
        {
          value: 'Customer.Name.Full',
          title: 'customer full name'
        },
        {
          value: 'Staff.Name.Full',
          title: 'staff full name'
        },
        {
          value: 'Staff.Digital.Signature',
          title: 'staff digital signaure'
        },
        {
          title: 'Email',
          menu: [
            {
              value: 'Customer.Email'
            },
            {
              value: 'Staff.Email'
            }
          ]
        }
      ]
    }
  ]
});

<textarea id="template-mce-clipboard">
  <h3>Using the {{mce-clipboard}} Marker with Templates</h3>
  <h4>Before inserting the example template, <strong>type in your name</strong> to the editor, select and copy it to your clipboard by using <strong>Ctrl+C</strong> for Windows users, or <strong>⌘+C</strong> for Mac users</h4>
  <div>
    <ol>
      <li>
        Select <strong>Template…</strong> from the <strong>Insert</strong> menu or by selecting the <strong>Insert template</strong> toolbar button.
      </li>
      <li>
        Select a template to add to the TinyMCE document from the <strong>Templates</strong> dialog that presents.
        <ol>
          <li>
            <p>Click the <strong>Without an <code>{{mce-clipboard}}</code> marker</strong> template.</p>
            <p>The template should be inserted into the editor content regardless of any clipboard content./p>
          </li>
          <li>
            <p>Click the <strong>With a <code>{{mce-clipboard}}</code> marker</strong> template.</p>
            <p><em>When a template <strong>does</strong> contain a valid {{mce-clipboard}} marker, the current content saved in the users clipboard will <strong>replace</strong> the marker when the user inserts the template.</em></p>
          </li>
        </ol>
      </li>
      <li>
        Click <strong>Insert</strong> or press <strong>Return</strong>.
      </li>
    </ol>
  </div>
</textarea>

tinymce.init({
  selector: "textarea#template-mce-clipboard",
  plugins: [ "advtemplate", "code", "help"],
  toolbar: "undo redo | inserttemplate",
  advtemplate_templates: [
    {
      title: 'Without an mce-clipboard marker',
      content: '<p>Hi , Thank you for visiting this page. We truly appreciate and value your feedback and any feature requests you may have While you are here, take a moment to explore mce-cursor, its another powerful tool designed for Templates</p>'
    },
    {
      title: 'With an mce-clipboard marker',
      content: '<p>Hi {{mce-clipboard}}, Thank you for visiting this page. We truly appreciate and value your feedback and any feature requests you may have While you are here, take a moment to explore mce-cursor {{mce-clipboard}}, its another powerful tool designed for Templates</p>'
    }
  ],
});