TinyMCE 5 is now live!  Read the announcement

tinymce.Plugin

Plugin base class, this is a pseudo class that describes how a plugin is to be created for TinyMCE. The methods below are all optional.

Examples

tinymce.PluginManager.add('example', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('example', {
        text: 'My button',
        icon: false,
        onclick: function() {
            // Open window
            editor.windowManager.open({
                title: 'Example plugin',
                body: [
                    {type: 'textbox', name: 'title', label: 'Title'}
                ],
                onsubmit: function(e) {
                    // Insert content when the window form is submitted
                    editor.insertContent('Title: ' + e.data.title);
                }
            });
        }
    });

    // Adds a menu item to the tools menu
    editor.addMenuItem('example', {
        text: 'Example plugin',
        context: 'tools',
        onclick: function() {
            // Open window with a specific url
            editor.windowManager.open({
                title: 'TinyMCE site',
                url: 'http://www.tinymce.com',
                width: 800,
                height: 600,
                buttons: [{
                    text: 'Close',
                    onclick: 'close'
                }]
            });
        }
    });
});

Methods

name summary defined by
add() Adds a instance of the add-on by it's short name. tinymce.Plugin
addComponents() Add a set of components that will make up the add-on. Using the url of the add-on name as the base url. This should be used in development mode. A new compressor/javascript munger process will ensure that the components are put together into the plugin.js file and compressed correctly. tinymce.Plugin
get() Returns the specified add on by the short name. tinymce.Plugin
load() Loads an add-on from a specific url. tinymce.Plugin
requireLangPack() Loads a language pack for the specified add-on. tinymce.Plugin

Methods

add

add(id:String, addOn:tinymce.Theme):tinymce.Theme, tinymce.Plugin

Adds a instance of the add-on by it's short name.

Examples
// Create a simple plugin
tinymce.create('tinymce.plugins.TestPlugin', {
  TestPlugin: function(ed, url) {
  ed.on('click', function(e) {
     ed.windowManager.alert('Hello World!');
  });
  }
});

// Register plugin using the add method
tinymce.PluginManager.add('test', tinymce.plugins.TestPlugin);

// Initialize TinyMCE
tinymce.init({
 ...
 plugins: '-test' // Init the plugin but don't try to load it
});
Parameters
  • id (String) - Short name/id for the add-on.
  • addOn (tinymce.Theme) - Theme or plugin to add.
Return value
  • tinymce.Theme - The same theme or plugin instance that got passed in.
  • tinymce.Plugin - The same theme or plugin instance that got passed in.

addComponents

addComponents(pluginName:String, scripts:Array)

Add a set of components that will make up the add-on. Using the url of the add-on name as the base url. This should be used in development mode. A new compressor/javascript munger process will ensure that the components are put together into the plugin.js file and compressed correctly.

Parameters
  • pluginName (String) - name of the plugin to load scripts from (will be used to get the base url for the plugins).
  • scripts (Array) - Array containing the names of the scripts to load.

get

get(name:String):tinymce.Theme, tinymce.Plugin

Returns the specified add on by the short name.

Parameters
  • name (String) - Add-on to look for.
Return value

load

load(name:String, addOnUrl:String, success:function, scope:Object, failure:function)

Loads an add-on from a specific url.

Examples
// Loads a plugin from an external URL
tinymce.PluginManager.load('myplugin', '/some/dir/someplugin/plugin.js');

// Initialize TinyMCE
tinymce.init({
 ...
 plugins: '-myplugin' // Don't try to load it again
});
Parameters
  • name (String) - Short name of the add-on that gets loaded.
  • addOnUrl (String) - URL to the add-on that will get loaded.
  • success (function) - Optional success callback to execute when an add-on is loaded.
  • scope (Object) - Optional scope to execute the callback in.
  • failure (function) - Optional failure callback to execute when an add-on failed to load.

requireLangPack

requireLangPack(name:String, languages:String)

Loads a language pack for the specified add-on.

Parameters
  • name (String) - Short name of the add-on.
  • languages (String) - Optional comma or space separated list of languages to check if it matches the name.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.