Writing a TinyMCE Plugin

Recently I had to write a plugin for TinyMCE that allowed users to see a list of predefined HTML and CSS tags should be used with a specific platform. Writing a TinyMCE plugin is actually for the most part pretty easy.

The documentation for writing TinyMCE plugins is pretty poor so I prefer to just open a new window that loads an additional file.

First, you write the plugin:

tinymce.PluginManager.add('cheatsheet', function(editor, url) {
    editor.addButton('cheatsheet', {
        text: 'Cheatsheet',
        icon: false,
        onclick: function() {
            editor.windowManager.open({
                title: 'Cheatsheet for KB Editor',
                width: 600,
                height: 500,
                 url: 'cheatsheet.php', /* here I load the new window with a PHP script */
             });
         }
     });
 });

Then you add the plugin in the initialization of your TinyMCE object. Note the name of the plugin is the first argument to tinymce.PluginManager.add.

plugins: [
    "advlist autolink link image lists preview anchor codemirror",
    "searchreplace wordcount fullscreen insertdatetime",
    "save table contextmenu directionality paste textcolor",
    "dropdown cheatsheet", /* See 'cheatsheet' plugin is added to the end */
],

 

Write a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.