Templates - snippets in TinyMCE

Questions about how to use the online - editors and suggestions how to improve them
Post Reply
Tata
Posts: 3586
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: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, 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

Tata
Posts: 3586
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: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, 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

bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: Templates - snippets in TinyMCE

Post by bastingse » Tue Mar 05, 2019 2:23 pm

Hi Folks, a reply on a 6 years old post......

I want to make it work again, using a defined template in the tinymce editor.
It's not that easy as i thought.....

I did modified the file: plugins/tinymce4/inits/init_fontawesome.js

To the following code:

Code: Select all

{
  selector: "%SELECTOR%",
  theme: "modern",
  skin: "lightgray",
  toolbar_items_size: "small",
  menubar:false,
  plugins: [
    "advlist anchor autolink autosave charmap code colorpicker contextmenu emoticons fullscreen hr",
    "image importcss insertdatetime link lists media nonbreaking paste",
    "save searchreplace table template textcolor visualblocks visualchars wordcount fontawesome noneditable"
  ],
  external_plugins: {
    "fontawesome": "%CMSIMPLE_ROOT%plugins/fa/editors/tinymce4/fontawesome/plugin.min.js"
  },
  toolbar1: "save | fullscreen code formatselect fontselect fontsizeselect styleselect",
  toolbar2: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify cut copy paste pastetext | bullist numlist outdent indent blockquote",
  toolbar3: "undo redo | link unlink anchor image media | hr nonbreaking removeformat visualblocks visualchars | forecolor backcolor | searchreplace | charmap fontawesome",
  toolbar4: "emoticons subscript superscript | template table insertdatetime help",
  image_advtab: true,
  image_title: true,
  file_browser_callback: "%FILEBROWSER_CALLBACK%",
  content_css: "%STYLESHEET%,%CMSIMPLE_ROOT%plugins/fa/css/font-awesome.min.css",
  importcss_append:true,
  style_formats_autohide: true,
  importcss_selector_filter: /(?:([a-z0-9\-_]+))(\.[a-z0-9_\-\.]+)$/i,
  %LANGUAGE%
  element_format: "%ELEMENT_FORMAT%",
  block_formats: "%HEADERS%;p=p;div=div;code=code;pre=pre;dt=dt;dd=dd",
  "insertdatetime_formats": ["%H:%M:%S", "%d.%m.%Y", "%I:%M:%S %p", "%D"],
  relative_urls: true,
  convert_urls: false,
  entity_encoding: "raw",
  noneditable_noneditable_class: 'fa',
  extended_valid_elements: 'span[*]'
}

    template_templates : [
	{
		title : "My Snippet",
		src : "snippet.htm",
		description : "Adds a HTML snippet"
	},
    ]





As you can see i added 'template' to the line of 'plugins' and added 'template' to the toolbar4 section.
Also ad this code on the bottom:

Code: Select all

template_templates : [
	{
		title : "My Snippet",
		src : "snippet.htm",
		description : "Adds a HTML snippet"
	},
    ]
Then i create a htm file snippet.htm like this:

Code: Select all

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="mceTmpl">
  <table width="98%%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th scope="col">a cell</th>
      <th scope="col">another cell</th>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
  </table>
</div>
</body>
</html>
And i uploaded this htm file to the root.....
unfortunatley , when i click in the editor on the button to insert a template it says "No templates defined."

Where did i go wrong???

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Templates - snippets in TinyMCE

Post by frase » Tue Mar 05, 2019 2:39 pm

Try the following:

Create a folder "templates" in ... \plugins\tinymce4\
Put your template file there.

In your ini file the path must look like this:

Code: Select all

templates: [
    {
        title: "My Snippet",
        url: "./plugins/tinymce4/templates/snippet.htm",
        description: "Adds a HTML snippet"
    }
]

bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: Templates - snippets in TinyMCE

Post by bastingse » Tue Mar 05, 2019 2:42 pm

thanks frase.... i got it work right away with this code:

Code: Select all

{
  selector: "%SELECTOR%",
  theme: "modern",
  skin: "lightgray",
  toolbar_items_size: "small",
  menubar:false,
  plugins: [
    "advlist anchor autolink autosave charmap code colorpicker contextmenu emoticons fullscreen hr",
    "image importcss insertdatetime link lists media nonbreaking paste",
    "save searchreplace table template textcolor visualblocks visualchars wordcount fontawesome noneditable"
  ],
  external_plugins: {
    "fontawesome": "%CMSIMPLE_ROOT%plugins/fa/editors/tinymce4/fontawesome/plugin.min.js"
  },
  toolbar1: "save | fullscreen code formatselect fontselect fontsizeselect styleselect",
  toolbar2: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify cut copy paste pastetext | bullist numlist outdent indent blockquote",
  toolbar3: "undo redo | link unlink anchor image media | hr nonbreaking removeformat visualblocks visualchars | forecolor backcolor | searchreplace | charmap fontawesome",
  toolbar4: "emoticons subscript superscript | template table insertdatetime help",
  templates: [
    {title: 'Some title 1', description: 'Some desc 1', content: 'My content'},
    {title: 'Some title 2', description: 'Some desc 2', url: 'snippet.htm'}
    ],
image_advtab: true,
  image_title: true,
  file_browser_callback: "%FILEBROWSER_CALLBACK%",
  content_css: "%STYLESHEET%,%CMSIMPLE_ROOT%plugins/fa/css/font-awesome.min.css",
  importcss_append:true,
  style_formats_autohide: true,
  importcss_selector_filter: /(?:([a-z0-9\-_]+))(\.[a-z0-9_\-\.]+)$/i,
  %LANGUAGE%
  element_format: "%ELEMENT_FORMAT%",
  block_formats: "%HEADERS%;p=p;div=div;code=code;pre=pre;dt=dt;dd=dd",
  "insertdatetime_formats": ["%H:%M:%S", "%d.%m.%Y", "%I:%M:%S %p", "%D"],
  relative_urls: true,
  convert_urls: false,
  entity_encoding: "raw",
  noneditable_noneditable_class: 'fa',
  extended_valid_elements: 'span[*]'
}

Post Reply