This can be very useful if you are using the tinymce editor on your site and want to be able to add simple or complex html templates.

Here is how to do it:

Add this to your tinymce init

Javascript

tinymce.init({ 
  /* ... */ plugins: "template", 
});

You can then add the option to access the templates either to the tinymce toolbar or as a dropdown menu.

Javascript

tinymce.init({ 
  /* ... */ menubar: "insert", 
  toolbar: "template", 
});

Adding the template you can choose if its a string included in the init or if its more detailed you can link it to a file. 

The template format is in:

• title
• description
• content or url

Javascript

tinymce.init({ 
  /* ... */ 
  templates: [ 
    { 
      title: "Some title 1", 
      description: "Some desc 1", 
      content: "<p>My content</p>", 
    }, 
    { 
      title: "Some title 2", 
      description: "Some desc 2", 
      url: "templates/development.html", 
    }, 
  ], 
});

I usually have a block that i use to insert code for highlight js formatting, which is pretty basic, so ill just include it in the content in my init.

Javascript

templates: [ 
    { 
      title: "HLJS HTML", 
      description: "Some desc 1", 
      content: "<p>My content</p>", 
    },

Current Function to load tinymce

Javascript

function load_tinymce(idclass) {
      tinymce.init({
          selector: idclass,
          plugins: [ "spellchecker code autolink link image fullscreen searchreplace wordcount visualblocks visualchars insertdatetime media table paste textcolor textpattern emoticons media lists" ],
          toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link unlink image | code | forecolor backcolor | emoticons",
          image_advtab: true,
                    skin: "oxide-dark",
                    content_css: "dark",
                    height: 400,
          /* content_css : "/css/style.css", */
                    relative_urls: false,
          convert_urls: false,
          remove_script_host : false
      });
  }

Add a template for HLJS HTML block

Javascript

function load_tinymce(idclass) {
      tinymce.init({
          selector: idclass,
          plugins: [ "spellchecker code autolink link image fullscreen searchreplace wordcount visualblocks visualchars insertdatetime media table paste textcolor textpattern emoticons media lists" ],
          toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link unlink image | code | forecolor backcolor | emoticons",
          image_advtab: true,
                    skin: "oxide-dark",
                    content_css: "dark",
                    height: 400,
          /* content_css : "/css/style.css", */
                    relative_urls: false,
          convert_urls: false,
                    templates: [ 
                    { 
                      title: "Some title 1", 
                      description: "Some desc 1", 
                      content: "<p>My content</p>", 
                    }, 
                    { 
                      title: "Some title 2", 
                      description: "Some desc 2", 
                      url: "templates/development.html", 
                    }, 
                  ],                    
          remove_script_host : false
      });
  }

Here is the final function including the plugin and menu item

Javascript

function load_tinymce_test(idclass) {
      tinymce.init({
          selector: idclass,
          plugins: [ "template spellchecker code autolink link image fullscreen searchreplace wordcount visualblocks visualchars insertdatetime media table paste textcolor textpattern emoticons media lists" ],
          toolbar1: "template | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link unlink image | code | forecolor backcolor | emoticons",
          image_advtab: true,
                    skin: "oxide-dark",
                    content_css: "dark",
                    height: 400,
          /* content_css : "/css/style.css", */
                    relative_urls: false,
          convert_urls: false,
                    templates: [
                    {
                      title: "HTML",
                      description: "A HTML HLJS Code Block",
                      content: "<pre><code class='html hljs xml'>HTML</code></pre>",
                            /* url: "templates/development.html", */
                    },
                    {
                      title: "Some title 2",
                      description: "Some desc 2",
                      url: "templates/development.html",
                    },
                  ],
          remove_script_host : false
      });
  }

You can see this adds an additional menu item to the tinymce editor, and allows you to access the templates.

Here is the icon location for the templates:

Then it opens the template selector, with our new templates:

Pick your template, and select save. which will add this block into the editor.

Paste your code in. I noticed sometimes while pasting in the code, it would delete some of the code block, so i had to add in some dots while pasting (might be a bug in tinymce). You can see in the demo below. 

HTML

<p>
test
</p>

The End! Hopefully this helps you adding templates into your tinymce installation.

You can see the full working demo, scripts and code below.

Here is another one for Video Embed with autoplay and loop

Javascript

{
  title: "Video Embed",
  description: "A PHP HLJS Code Block",
  content: "<p><strong><video autoplay='autoplay' loop='loop' controls='controls' width='100%' height='600'><source src='https://i.imgur.com/ot1hc51.mp4' type='video/mp4' /></video></strong></p>",
},