Adding HTML Templates into TinyMCE Editor

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.

HTML

<h2>Demo TinyMCE with Templates</h2>
<textarea id='mytinymce'></textarea>

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.2/skins/ui/oxide/content.min.css" integrity="sha512-U8A/twP2qv8LP/I9jf9GOI6FioG4BhrB1yMkT6Z+5UI44Z5qhuVeR5Pnh4NATpPPmaPP34gm6GV1roiejydBYQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.2/skins/ui/oxide-dark/skin.min.css" integrity="sha512-r3IXhPGM2XA8Yqjv5SKfx/3FNWSaAtk6h1TbZh2Oz38Mp+xO1zRGMu2Ek/IF870FyMV2f1Gq5og5i3wYEC5W8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.2/tinymce.min.js" integrity="sha512-sOO7yng64iQzv/uLE8sCEhca7yet+D6vPGDEdXCqit1elBUAJD1jYIYqz0ov9HMd/k30e4UVFAovmSG92E995A==" crossorigin="anonymous"></script>

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: "<h4>HTML</h4><pre><code class='html hljs xml'>HTML</code></pre>",
							/* url: "templates/development.html", */
				    },
				    {
				      title: "CSS",
				      description: "A CSS HLJS Code Block",
				      content: "<h4>CSS</h4><pre><code class='css hljs'>.css { value: 1px; }</code></pre>",
				    },
				    {
				      title: "JS",
				      description: "A JS HLJS Code Block",
				      content: "<h4>Javascript</h4><pre><code class='javascript hljs'>function test() { console.log('test'); }</code></pre>",
				    },
				    {
				      title: "PHP",
				      description: "A PHP HLJS Code Block",
				      content: "<h4>PHP</h4><pre><code class='php hljs'>a = 1;</code></pre>",
				    },
                  ],
          remove_script_host : false
      });
  }

$(document).ready(function(){ 
  load_tinymce_test("#mytinymce");
});

Demo TinyMCE with Templates

Other Items in javascript

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 914 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
“We ought to take outdoor walks in order that the mind may be strengthened and refreshed by the open air and much breathing.".
Seneca