Templates - snippets in TinyMCE

Questions about how to use the online - editors and suggestions how to improve them
Post Reply
Tata
Posts: 2691
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Templates - snippets in TinyMCE

Post by Tata » Fri Mar 01, 2013 7:43 pm

There is a function of inserting individual templates into the content in FCKeditor.
I need repeatidly use the same template for a page elements. E.g.:

Code: Select all

<div class="card">
     <div class="image">IMAGE</div>
     <div class="description</div>
          <div><h4>Card Title</h4><div>
          <div class="text">Some text</div>
          <div style="clear:both"></div>
     </div>
</div>
Demo:
[ external image ]

Is there a way how to make it in TinyMCE?
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 12601
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Templates - snippets in TinyMCE

Post by cmb » Fri Mar 01, 2013 9:51 pm

This can be done with the "template" plugin, which is already included in the CMSimple_XH distribution. How to use it, is explained on http://www.tinymce.com/wiki.php/Plugin:template. The file that has to be adjusted for XH is plugins/tinymce/inits/init_*.js.
Christoph M. Becker –Plugins for CMSimple_XH, but not for CMSimple 4+

Tata
Posts: 2691
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Templates - snippets in TinyMCE

Post by Tata » Sat Mar 02, 2013 12:15 am

It's fine. Seems I am closer. Now I have written the custom_templates.xml file with following template (classeds are defined in temlates/template/stylesheer.css).

Code: Select all

<Templates imagesBasePath="tinyMCE_template/card/images/">
	<Template title="Image and Title">
		<Description>One main image floating left with a title and text that surround to the right.</Description>
		<Html>
			<![CDATA[
				<div class="card">
					<div class="image">INSERT IMAGE HERE</a></div>
					<div class="description">
						<h4>INSERT TITLE</h4>
						Add some text</div>
					</div>
				</div>
			]]>
		</Html>
	</Template>
</Templates>
I also found the way how to activate the template plugin in the editor. Now I see the button and it opens the dialogue. And here I stop. How to get this template into the list of templates in template-plugin-dilg.box?

I have carefully read the documentation and the forum for TinyMCE but have find no comprehensible tutorial as what, where to write/edit, which files to create and where to save them. Has anybody an idea how to make/add a partial template of the content above?
THX in advance.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 12601
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Templates - snippets in TinyMCE

Post by cmb » Sat Mar 02, 2013 12:13 pm

Everything is described on http://www.tinymce.com/wiki.php/Plugin:template, even it that is somewhat confusing as there are many possibilities and it doesn't cater specifically for CMSimple_XH. So I'll try to explain it here (might go to the Wiki later).
  1. Add the template button to your tinyMCE init file. E.g. in plugins/tinymce/inits/init_full.js replace the line with theme_advanced_buttons4 with the following:

    Code: Select all

        theme_advanced_buttons4 : "emotions,sub,sup,|,tablecontrols,insertdate,inserttime,help,template",
  2. At the end of this file add:

    Code: Select all

        template_templates : [
    	{
    		title : "My Snippet",
    		src : "snippet.htm",
    		description : "Adds a HTML snippet"
    	},
        ]
    (don't forget to delimit the former code with a comma)
  3. Then place a file snippet.htm in the root folder of CMSimple_XH with the following contents:

    Code: Select all

    <p>This is my <strong>first</strong> snippet.</p>
When you enter edit mode, you'll see a new button on the right hand side of the 4th row of the toolbar ("Insert Predefined Template Content"). When you click it, a dialog with a selectbox will pop up; choose "My Snippet", and the text from the file will be shown in the box below the selectbox. Click "Insert" and it will be placed in the editor area.

Of course it's not nice to have these template files in the root folder; it's better to keep them under userfiles. So you simply have to adjust the path in init_full.js:

Code: Select all

    template_templates : [
	{
		title : "My Snippet",
		src : "userfiles/templates/snippet.htm",
		description : "Adds a HTML snippet"
	},
    ]
Unfortunately this won't work the same for secondary languages, as for "de" the snippet would be expected in de/userfiles/templates/snippet.htm. A solution: place the snippets in /editortemplates/ and the translations in /de/editortemplates/.

Furthermore it's possible to use placeholders in the snippets, but their use is quite limited. A much more powerful possibility is offered by templates, which are snippets embedded inside a <div class="mceTmpl">. For the sake of giving an example: place the following in snippet.htm:

Code: Select all

<div class="mceTmpl">
<div>My name is <span class="first-name">FIRST</span> <span class="last-name">LAST</span>!</div>
</div>
and add the following to init_full.js (don't forget the comma delimiter):

Code: Select all

    template_replace_values: {
	"first-name": function(el) {el.innerHTML = window.prompt("First Name");},
	"last-name": function(el) {el.innerHTML = window.prompt("Last Name");}
    }
When you select the snippet in the preview "My name is FIRST LAST!" will be shown, but when you insert it, you'll be prompted for the actual first and last name, which will be inserted. Obviously this example has no practical value, but with some knowledge of JavaScript and tinyMCE one might be able to build useful replacement functions.
Christoph M. Becker –Plugins for CMSimple_XH, but not for CMSimple 4+

Post Reply