Add custom menu entries to tinymce

Question

I want to add a custom menu to tinymce. I just want to press a sub element and insert text. How can I do that?

I want to do that through a plugin.

score 2 · Answer 1 · answered Jun 03 '16 at 15:12

You can do this directly via the TinyMCE configuration object (no need for a plugin). You can add a setup function in the configuration object and then add either a toolbar button or menu item to do what you want.

Setup Function The TinyMCE configuration object can have a setup function where you can add functionality to the editor. It is a simple function:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  .
  .
  .
  setup: function (editor) {
    //Your setup code here... 
  }
});

You can then add either a toolbar button or menu item via that setup function as described below.

Toolbar Button Example:

setup: function (editor) {
    editor.addButton('customButton', {
        text: 'My Custom Button',
        context: 'tags',
        onclick: function () { 
            editor.insertContent('content to insert goes here');
        }
    });
}

Don't forget to add this button to a toolbar in the TinyMCE configuration.

Menu Example

setup: function (editor) {
    editor.addMenuItem('custommenuitem', {
        text: 'Text for Menu Item', 
        context: 'insert',
        onclick: function () { 
            editor.insertContent('content to insert goes here');
        }
    });
}

This will now appear in the Insert menu (based on the context setting)

If you want a top level menu of your own (as opposed to placing your button in an existing menu) you can do this: https://www.tinymce.com/docs/demo/custom-toolbar-menu-button/ — Michael Fromin, Jun 03 '16 at 15:20
The Impress Pages demo site uses TinyMCE 4.1.6 at least the current version is not using TinyMCE 3. As for making an Impress Pages plugin - I have no idea as I have no experience with that tool. Perhaps you can ask that via Impress Pages support? — Michael Fromin, Jun 03 '16 at 19:18

score 0 · Answer 2 · answered Jun 04 '16 at 08:20

0

Here is an example plugin, that modify TinyMCE http://market.impresspages.org/plugins/JustifyAlign

There are more TinyMCE related plugins to take as example http://market.impresspages.org/plugins

answered Jun 04 '16 at 08:20

Mangirdas Skripka

1,647
1
15
14

I know that. The problem is HOW I'm gonna modify tinymce toolbar trough an impress pages plugin to add a menu. The answer tha Michael left requires me to change the setup function, so I'll have to alter the core files. – dzervas Jun 05 '16 at 17:23

score 0 · Answer 3 · answered Sep 26 '16 at 05:51

First you have to read up the ImpressPages plugin documentation to understand how to create a plugin https://www.impresspages.org/docs/plugin.

You'll get to the part where you add an assets folder where you'll place a tinymce config file

like this one:

var originalConfigFunction = ipcustomMceConfig;

var ipcustomMceConfig = function () {
var originalConfig = originalConfigFunction();



return originalConfig;
}

var Custom = ipcustomMceConfig;
var ipcustomMceConfig = function () {
var originalConfig = Custom();
originalConfig.toolbar2 = originalConfig.toolbar2 + ' example ';
originalConfig.external_example_path = ip.baseUrl + 'Plugin/example/';


if (!originalConfig.external_plugins) {
    originalConfig.external_plugins = {};
}
originalConfig.external_plugins.example = ip.baseUrl + 'Plugin/Custom/assets/example/plugin.min.js';
originalConfig.content_css = 'url/sample/css';
originalConfig.extended_valid_element = 'span[class]';

return originalConfig;

}

That's how you add an element to the toolbar as a plugin. Notice the ip.baseUrl which is very important for you to keep it dynamic avoid using hard coded paths.

Look at this plugin for example https://github.com/impresspages-plugins/TinyMceFileBrowser, once you go through the structure and each file in it you'll get a good grasp.

Add custom menu entries to tinymce

3 Answers3