TinyMCE - how to add custom insert template button for each template

Question

For keeping site responsiveness and applying standard grid system (I'm using Zurb Foundation) on custom user data entered on my web application I have defined some templates in tinyMCE to insert custom user data and pages on my web application. But it only includes one button in toolbar which is showing a dialog for selecting a template and pressing ok after it was selected. This is the default button which is provided by templates plugin:

enter image description here

This is dialog which is shown:

enter image description here

But I need to define custom toolbar buttons to add my custom templates when user press them without showing any dialog. Is there any right way to do this on a simple way in tinyMCE without writing much of javascript codes?

tvgemert tvgemert · Accepted Answer · 2015-06-01T15:40:03

Referring to your comment

without writing much of javascript codes

You will always have to write javascript to create something like this in TinyMce, but it doesn't have to be complicated. A simple and straightforward approach is to write a plugin for each toolbar button you would like to create.

For instance a plugin named "Insert template X" could be:

tinymce.PluginManager.add('test', function(editor, url) {
    editor.addButton('test', {
        text: 'Test',
        icon: true,
        onclick: function() {
            editor.insertContent('This is inserted');
        }
    });
});

Find more information about building and using your own plugin's here: http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin

TinyMCE - how to add custom insert template button for each template

1 Answers