Alligatorsneeze

UPDATE: This also works with TinyMCE 2.1.1 and Drupal 5.1, but there is some strange behavior with the icons not showing up in Safari 2 and IE6.

I needed a simple plugin for TinyMCE, but it seemed impossible to find any kind of real examples. All that I needed was a custom button, and when that button was clicked, an image to be inserted into the text. No popups, nothing fancy at all. I'm using TinyMCE version 2.0.9 for this, and in the end I integrate it into Drupal 4.7's TinyMCE module. This should work without the Drupal integration, though.

Here's an example of creating such a plugin. We'll just call it icon, to be generic.

First, in your TinyMCE plugins directory, create a new directory and name it icon. You can also start with copying the _template directory if you wanted, but in my version of TinyMCE I don't seem to have one. Inside the "icon" directory, I also have a langs and an images directory.

Back to the icon directory, though. We need to create a file, called editor_plugin.js. Here's what's inside my file:

/**
 * Insert icon plugin
 *
 *
 * @author Brenda Boggs
 * @copyright Copyright © 2007, Brenda Boggs, All rights reserved.
 */
 
tinyMCE.importPluginLanguagePack('icon', 'en');
var TinyMCE_IconPlugin = {

    getInfo : function() {
        return {
            longname :  'Icon',
            author :    'Brenda Boggs',
            authorurl : 'http://alligatorsneeze.com/',
            infourl :   'http://alligatorsneeze.com',
            version :   '0.1'
        };
    },

    initInstance : function(inst) {
        inst.addShortcut('alt', 'u', 'lang_icon_desc', 'mceIcon', false, 1);
    },

    getControlHTML : function(cn) {
        switch (cn) {
            case "icon": return tinyMCE.getButtonHTML(cn, 'lang_icon_desc', '{$pluginurl}/images/icon.gif', 'mceIcon');
        }

        return '';
    },


    execCommand : function(editor_id, element, command, user_interface, value) {
        switch (command) {
            case "mceIcon": 
                    tinyMCE.execInstanceCommand(editor_id, 'mceInsertContent', false, "");
                    return true;
            }
            return false;
    },
};

tinyMCE.addPlugin("icon", TinyMCE_IconPlugin);

Keep in mind, it's calling the actual image that will show up in the TinyMCE toolbar in one place, and the image that's going to be inserted into the text in another place.

This should work for anything you need quickly inserted besides images, too. Just replace the img code with the text or code you want.

Now that that's done, you need to go into the langs folder and create a file called en.js. This file only consists of these lines:

tinyMCE.addToLang('',{
icon_desc : 'Insert Icon'
});

The image you want to show up as the button within the editor will be placed in the images folder. And voila. Simple plugin created.

I'm certainly no JavaScript guru and this was pieced together by looking at other plugins, so feel free to suggest any improvements.

Drupal Integration

If you're using this with Drupal, you need to add these lines to your plugin_reg.php file near the bottom, but before the 'return $plugins':

$plugins['icon'] = array();
$plugins['icon']['theme_advanced_buttons3'] = array('icon');

You can alternate theme_advanced_buttons3 with theme_advanced_buttoms1 or theme_advanced_buttoms2, which seems to dictate where on the TinyMCE editor bar the button is placed.