I wanted to create a button for the TinyMCE Rich Text Editor for Wordpress. It was tough to find good docs on the subject. There are a couple of useful posts out there but in general I found them lacking. http://codex.wordpress.org/TinyMCE_Custom_Buttons#Creating_an_MCE_Editor_Plugin

The above resource has a good section on the PHP code needed to write your own callbacks but there is no mention of the JavaScript required to create a button and interact with it. Links are available for more reading but why not also post a code sample to get up and running?

Anyway, I made a simple plugin after hobbling a bunch of resources together to get a button in the text editor that when clicked triggers an alert to the window. The code isn't fancy but it might provide a starting off point for a larger project or be useful as a resource for some of the basic ideas involved. I read through a couple of the sample plugins included with Wordpress along with the Viper Video Quicktags Plugin, which makes extensive use of the feature. However, they were too complex for a quick, basic understanding.

This plugin doesn't do a lot. I'll probably flesh it out a bit more when I have a clearer understanding of how it all works. For now here are some code samples and at the bottom of this post there is a link to the .zip file for the plugin which you can install on your own site.

In wp-content/plugins/hello_editor/index.php

<?php
/*
Plugin Name: Hello Editor
Plugin URI: http://seanbehan.com/wordpress/tinymce-rich-text-editor-hello-editor-plugin-tutorial-and-example/
Description: A simple plugin showing how to add a button to the rich text editor in Wordpress.
The plugin doesn't do anything except place a button and respond to onclick event, with "Hello Editor".
Most of the editor plugins available are too 'functional' to quickly read and see how to do the
basics. This plugin doesn't 'do' anything, rather it makes it simple to read what is going on.
Version: 0.1
Author: Sean Behan
Author URI: http://seanbehan.com
*/
define( "HELLO_EDITOR_PLUGIN_DIR", "hello_editor" );
define( "HELLO_EDITOR_PLUGIN_URL", "/wp-content/plugins/" . HELLO_EDITOR_PLUGIN_DIR );
// Register the external pllugin from the .js file
function hello_editor_register_external_plugin($plugin_array) {
$plugin_array['HELLO_EDITOR'] = HELLO_EDITOR_PLUGIN_URL . '/editor_plugin.js';
return $plugin_array;
}
// Add the button to the array NOTE The name here "HELLO_EDITOR" must
//match the name in the editor plugin file for the addButton(name_of_button) function!
function hello_editor_register_button($buttons) {
array_push( $buttons, "|", "HELLO_EDITOR" );
return $buttons;
}
// Filters which will call our functions
function hello_editor_init(){
add_filter("mce_external_plugins", "hello_editor_register_external_plugin");
add_filter('mce_buttons', 'hello_editor_register_button');
}
// When the editor is initialized
add_action('init', 'hello_editor_init');

In wp-content/plugins/hello_editor/editor_plugin.js

(function() {
  //Init the plugin
  tinymce.create('tinymce.plugins.HELLO_EDITOR', {
    init : function( ed, url ) {
    //addButton name needs to match $plugin_array['HELLO_EDITOR'] in add_filter function
    ed.addButton('HELLO_EDITOR', {
      title : 'Hello Editor',
      image : url + "/buttons/hello.png",
      onclick : function(){
        alert("HELLO EDITOR!");
      }
    });
  },
  //Info about the plugin
  getInfo : function() {
    return {
      longname : "Sean Behan's Sample Hello Editor Plugin",
      author : 'Sean Behan',
      authorurl : 'http://www.seanbehan.com/',
      infourl : 'http://seanbehan.com/wordpress/tinymce-rich-text-editor-hello-editor-plugin-tutorial-and-example/',
      version : "0.1"
    };
  }
});
tinymce.PluginManager.add('HELLO_EDITOR', tinymce.plugins.HELLO_EDITOR);
})();

You'll also need a directory called buttons inside the hello_editor plugin directory with a hello.png file which will be displayed. Without it you'll just get a blank button. You can rename this but remember to change the name in the editor_plugin.js file as well.

You can download the sample plugin here http://seanbehan.com/wp-content/uploads/2009/11/hello_editor.zip

Just finishing up brewing up some fresh ground comments...