DESIGNED DEVELOPED DELIVERED

Mob: 07760 392284edward@ee-web.co.uk

ee-web thinks... a bit

Go on, make my day ... leave a comment

Using the snippet/template function in tinymce

May 10th, 2014 by Edward

In Tinymce extended there is a cool feature that enables you to press a button and insert a pile of code.

As yet I haven’t been able to find how to do this without a core override… but maybe that’s not such a big deal —
Each of the additional snippets is a separate html file that lives in

media/editors/tinymce/templates

It comes set up with a couple of simple examples – layout1.html and snippet1.html.
I just created a new one – quickbio.html in this case which had this piece of code in that was going to be used over and over:

<div class="quickbio">
<img src="images/fct/bio-pic-placeholder.jpg" />
<p> Dr Bob<br />Springfield University</p>
</div>
<p>I am outside the div</p>

Now you have to tell tinymce about the existence of this new file – so it needs registering:

This is done in plugins/editors/tinymce/tinymce.php – I’d take a backup of this just in case…

Around line 459 find:

$templates = "templates: [
{title: 'Layout', description: 'HTMLLayout', url:'" . JUri::root() . "media/editors/tinymce/templates/layout1.html'},
{title: 'Simple snippet', description: 'Simple HTML snippet', url:'" . JUri::root() . "media/editors/tinymce/templates/snippet1.html'}
],";
}

This registers the two existing little templates. So its pretty straight forward to add your new one

{title: 'Simple bio', description: 'Use for a photo, with small piece of text under', url:'" . JUri::root() . "media/editors/tinymce/templates/quickbio.html'}

in my case, you just need to be careful with your commas – last one doesn’t need one.

So the final code looks thusly:

$templates = "templates: [
{title: 'Layout', description: 'HTMLLayout', url:'" . JUri::root() . "media/editors/tinymce/templates/layout1.html'},
{title: 'Simple snippet', description: 'Simple HTML snippet', url:'" . JUri::root() . "media/editors/tinymce/templates/snippet1.html'},
{title: 'Simple bio', description: 'Use for a photo, with small piece of text under', url:'" . JUri::root() . "media/editors/tinymce/templates/quickbio.html'}				
					
],";
}

I found that in order to make this appear as an option for the editor in the joomla backend I had to clear the cache – a simple close and open of the article/module wasn’t enough.

So clear that cache, and bob’s once again the proverbial uncle. Snippets of code at the press of the ‘template’ button.

categories

Edward owns and runs ee-web design and has been building websites for over 12 years. He is passionate about... most things really

Was this post helpful or interesting? Spread the news.

  1. This no longer applies at least on the newest Joomla. Now Tinymce detects automatigally HTML-files. To get your code to show up on the editor you have to put title and description to the language file for example en-GB.plg_editors_tinymce.ini.
    Just copy: PLG_TINY_TEMPLATE_SNIPPET1_DESC=”Simple HTML snippet.”
    PLG_TINY_TEMPLATE_SNIPPET1_TITLE=”Simple Snippet” and paste underneath and change SNIPPET1 to match your HTML-file name. Also change “text” parts to your own ones. This is still a core override.

    Comment by aeternus — October 27, 2016 @ 6:18 am

  2. Thanks to Aeternus for the update

    Comment by Edward — October 27, 2016 @ 9:14 am

Leave a comment

*


tag