Creating a plugin

Creating plugins in TinyMCE is pretty simple this tutorial tries to outline some of the basic concepts of creating a plugin. For more details consult the API documentation and check the existing plugins we ship with the core.

File Structure

To create a plugin you need to create a directory in the tinymce plugins directory. TinyMCE will load the plugin.js file if you use the tinymce.js file in your page. If you use the tinymce.min.js file it will load the plugin.min.js file. It's recommended to use the tinymce.js file while developing then have a build script minifying the plugin.js into plugin.min.js for production usage.

The build scripts that comes with the dev package of TinyMCE will automatically build all plugins including your custom ones.

Example of the plugin file structure

/tinymce/plugins/example/plugin.js
/tinymce/plugins/example/plugin.min.js

You can also have the plugin in any location you want by loading the plugin.js/plugin.min.js files directrly after the tinymce.js/tinymce.min.js.

Example of loading the plugin from another url

<script src="/tinymce/js/tinymce.min.js"></script>
<script src="/scripts/my.tinymce.plugin.js"></script>
<script>
tinymce.init({..});
</script>

Example plugin

Here is an example plugin showing how you add a simple toolbar button and menu item. The button opens a dialog that lets you type in a title that gets inserted into the editor. The menu item will open the tinymce site in a dialog.

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'
                }]
            });
        }
    });
});

Example init

Here is a example on how to use the new toolbar button.

tinymce.init({
    selector: 'textarea',
    plugins: 'example',
    toolbar: 'example'
});