How to create and manage content snippets with TinyMCE Advanced Templates

How often would you guess customers reuse the same content snippets and text templates over and over again in your app? There’s a good chance they’re writing and rewriting each content snippet from scratch each time they need it. It might work well once. If used daily, however, the consequences are dire: productivity drops, errors appear, content becomes inconsistent, and the entire user experience slips into misery. Your app’s rich text editor has the answer to prevent these problems. Say ‘Hello’ to TinyMCE Advanced Templates plugin.

Using the TinyMCE rich text editor and Advanced Templates (Premium) plugin gives writers the power to quickly save and insert content, as well as creating their own templates from content snippets. Sound perfect for what you’re working on? Very good – this article shows the basics, and it specifically explains the essentials of the new plugin – from getting started, to understanding the basics of content snippets and Advanced Templates plugin abilities.

What are content snippets?

Content snippets are selections of content that writers create with the intention of reusing them over and over – a time saving feature (CMSs often use them). Therefore, applications that have an inbuilt functionality to save and modify content snippets, offer distinct time savings, positive user experience, and great marketability advantages.

On a larger scale, templates are made from specific content snippets. A content snippet is part of the text sitting in the text editor. From the content snippet’s selected, customers then make text templates and the templates are saved for reuse. The templates can be sorted into categories, and modified or moved around as needed. 

In short, before a text template is made, it begins as a content snippet.

How Advanced Templates plugin works with content snippets

The Advanced Templates (Premium) plugin lets you highlight a selection of content, and either save it as a standalone text template, or add it to a collection (called a category). It can then be reused as needed. 

IMPORTANT NOTE: The Advanced Templates plugin’s content snippet capture and management exceeds the templating capacity of TinyMCE’s other, more basic, Templates plugin.

Broadly, here’s how it works:

1. Once the user has highlighted their content snippet, they can click the Advanced Template toolbar button to create a new template.
2. The plugin runs a fetch API call, and uses the GET, (also the POST, PUT, DELETE, and PATCH methods depending on the context) to connect with the database.
3. A list of saved templates can then be viewed and selected. Clicking the template runs another fetch call to get the content.
4. The content appears in the text area once the template is selected, the Insert button is clicked

How to set up content snippets in TinyMCE

Before anything else, you’ll need to get a TinyMCE API key. The Advanced Templates plugin is a Premium plugin. When you sign up for an API key, you get 14 days free access to all of TinyMCE’s Premium plugins. Navigate to the Get-tiny sign up page to get your FREE rich text editor API key. 

With your API key ready, you can set up a demo to get an idea of how the plugin works with it’s fetch APIs to capture content snippets, and save them as templates:

1. Create an index.html file.

2. With your file open, in the head section, add script tags, and reference TinyMCE Cloud through a CDN link within the script tags. This is what the link looks like:

<script
  src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js"
  referrerpolicy="origin"
></script>;

3. Add another pair of script tags, add the following JavaScript. It’s the tinymce.init method, and it’s how you control TinyMCE and get the Advanced Templates plugin configured:

<script>
   tinymce.init({
   selector: '#editor',
   plugins: 'advtemplate powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap linkchecker emoticons advtable export autosave',
   toolbar: 'undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline | link image | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat | inserttemplate addtemplate',
   height: '600px'
       });
</script>

4. Add initial HTML content, and the CSS selector class to some textarea tags. The selector is set as an id with the value “editor” in the TinyMCE init script:

<body>
  <textarea id="editor">
        <h1>Introducing Templates</h1>
        <h2>why use templates?</h2>
        <p>Time - don't rewrite the same content over and over. Make a template, and update it when you need to</p>
        <h2>Template Procedure</h2>
        <ol>
            <li>highlight the content snippet</li>
            <li>Click the add template toolbar button</li>
            <li>delete the old version if not needed in the template window</li>
        </ol>
        <p>Thanks for using advanced templates!</p>
    </textarea>
</body>

5. Test run the index.html file by opening it in your browser, or use a local server command with Python or with the PHP command:

How to create content snippets in TinyMCE

With the demo set, the next step is configuring the basics of the Advanced Template plugin options. This is where the fetch API calls to post and get content from your database are set up.

NOTE: The following demo uses a dummy .JSON file as a database stand-in, and does not configure the additional JavaScript or server side script needed to connect the fetch API calls to the database. This part of the configuration is beyond the scope of this article.

1. In the same directory as your index.html file, create a .JSON file to stand in place of a database. To do this on the command line, run the following command:

touch database.json

2. Open the file, and add the following JSON content:

[
  {
    id: "1",
    title: "Resolving tickets",
    content:
      "<p>As we have not heard back from you in over a week, so we have gone ahead and resolved your ticket</p>",
  },
  {
    id: "2",
    title: "Quick replies",
    items: [
      {
        id: "3",
        title: "Message received",
        content:
          "<p>Just a quick note to say we have received your message, and will get back to you within 48 hours.</p>",
      },
      {
        id: "4",
        title: "Progress update",
        content:
          "</p>Just a quick note to let you know we are still working on your case</p>",
      },
    ],
  },
];

3. Save the changes

4.  Include the advtemplate_get_template option:

tinymce.init({
    selector: "textarea",
…//skipped for brevity
    height: 600,
    width: "100%",
    advtemplate_get_template: (id) => ({ })
});

5. Add the fetch API call:

advtemplate_get_template: (id) =>
  fetch({
    method: "GET",
  });

6. Add the following conditions to the API call, including the.catch property in case of errors:

advtemplate_get_template: (id) =>
    fetch({
      method: 'GET',
    })
    .then((response) => response.json())
    .then(({ id, title, content }) => ({id, title, content}))
    .catch((error) => console.log('Failed to get template\n' + error)),

7. Make sure the option references the stand-in database created in the preceding steps by adding “/database.json” + id:

advtemplate_get_template: (id) =>
    fetch("/database.json" + id, {
      method: 'GET',
    })
    .then((response) => response.json())
    .then(({ id, title, content }) => ({id, title, content}))
    .catch((error) => console.log('Failed to get template\n' + error)),

8. Finally, include the advtemplate_list option, which is required for the plugin to retrieve template data:

advtemplate_list: () =>
      fetch("/database.js", {
        method: 'GET',
      })
      .then((response) => response.json())
      .then((data) => data)
      .catch((error) => console.log('Failed to get template list\n' + error)),
});

9. Save the changes

Configuring the ID

In an actual database connection, ideally the id identifier would be automatically generated by the database. For example, if you configured Advanced Templates to connect to the browser’s IndexedDB local storage, the following would automatically increment the id value.

For a database such as MySQL, the following AUTO_INCREMENT query can generate the id value as needed:

CREATE TABLE templates (
    id INT unsigned NOT NULL AUTO_INCREMENT,
    title VARCHAR(255) NOT NULL,
    PRIMARY KEY (id)
);

With the database stand in and Advanced Template plugin configured to get templates, you can open the Advanced Templates dialog window and see the demo database:

Saving content snippets for templates

1. Add the advtemplate_create_template option to the TinyMCE init script:

advtemplate_create_template: (title, content, categoryId) => ({});

2. The Advanced Templates plugin saves work by automatically collecting the content snippets the user selects in the TinyMCE rich text editor. All you need to configure is to specify the body of the post method with the following:

advtemplate_create_template: (title, content, categoryId) =>
  fetch({
    method: "POST",
    body: JSON.stringify({
      title,
      content,
      categoryId,
    }),
  });

3. Add the following conditions:

    advtemplate_create_template: (title, content, categoryId) =>
    fetch({
      method: 'POST',
      body: JSON.stringify({
        title,
        content,
        categoryId     
      }),
    })
    .then((response) => response.json())
    .then(({ id }) => ({ id }))
    .catch((error) => console.log('Failed to create template\n' + error)),

4. Reference the stand-in database:

    advtemplate_create_template: (title, content, categoryId) =>
    fetch("/database.json", {
      method: 'POST',
      body: JSON.stringify({
        title,
        content,
        categoryId     
      }),
    })
    .then((response) => response.json())
    .then(({ id }) => ({ id }))
    .catch((error) => console.log('Failed to create template\n' + error)),

5. Save the changes.

With the advtemplate_create_template option configured, customers can now select a content snippet, and transform it into a template.

Here’s how the content snippet selection works in the demo:

In production, the content snippet selection and template process works like this example:

Next Steps – setting up a database for Advanced Templates

The next steps for your application is to configure the database so it connects to the fetch API calls that the Advanced Templates plugin uses, when users make content snippets and templates.

Creating and opening templates are also just two of the options available when configuring Advanced Templates. You can also:

• Set up categories for the templates
• Move templates to different categories
• Delete templates and categories

Check on the documentation for more information on setting up all the options the Advanced Templates (Premium) plugin offers.

You can contact us if you have any questions about how Advanced Templates can help you develop a better experience for your customers.