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.

Answer 1

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)

Answer 2

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

Answer 3

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.