alex.rabe

I hope this documentation , is very soon obsolete. You can follow the status of the actual hook implementation at trac.wordpress.org under bug #3563 . Follow procedure to integrate a button in the TinyMCE Editor . Everytime you see the phrase “myplugin” you need to replace it with your plugin name :

1. This is the main script to integrate the button control. It’s checks first the version of WordPress and activate then additional hooks and filter. If the Rich Text Editor (RTE) is deactivated , then we can use again buttonsnap.php

function myplugin_addbuttons() {

global $wp_db_version;

// Check for WordPress 2.1+ and activated RTE
if ( 3664 <= $wp_db_version && 'true' == get_user_option('rich_editing') ) {

// add the button for wp21 in a new way
add_filter("mce_plugins", "myplugin_button_plugin", 0);
add_filter('mce_buttons', 'myplugin_button', 0);
add_action('tinymce_before_init','myplugin_button_script');
}
else {

// Do it in the old way with buttonsnap
$button_image_url = PLUGINURL . '/javascript/buttonpic.gif';
buttonsnap_separator();
buttonsnap_jsbutton($button_image_url, __('myplugin Gallery', 'myplugin'), 'myplugin_buttonscript();');

}

}

2. This script you need to call via a add_action hook

// init process for button control
add_action('init', 'myplugin_addbuttons');

3. The two filters mce_plugins and mce_button integrate the button in the correct way (Described in the Codex). The plugins are loaded by the rich text editor. Filters using this hook should append the array they receive. The input and output is an array of strings. Important is the “-myplugin” with the dash symbol, cause this will tell TinyMCE that there is a external plugin.

// used to insert button in wordpress 2.1x editor
function myplugin_button($buttons) {
array_push($buttons, "separator", "myplugin");
return $buttons;
}

// Tell TinyMCE that there is a plugin (wp2.1)
function myplugin_button_plugin($plugins) {
array_push($plugins, "-myplugin","bold");
return $plugins;
}

4. Thanks to An-archos and Viper007Bond there exist a way to redirect the script path for the TinyMCE plugin. Normally all plugins are located in the path “/wp-includes/js/tinymce/plugins/”, but with this hook we redirect the path for this plugin to your plugin folder. This script is called “before” the page load the TinyMCE instance.

// Load the TinyMCE plugin : editor_plugin.js (wp2.1)
function myplugin_button_script() {
$pluginURL = PLUGINURL.'javascript/';
echo 'tinyMCE.loadPlugin("myplugin", "'.$pluginURL.'");'."\n";
return;
}

5. Now we can have a look for the main JavaScript which activate the button. It must be called “editor_plugin.js” and it must be placed in your plugin folder (or subfolder as you can see in the example). More information about the script you can find in the documentation from MoxieCode . Important is the call routine of your plugin for the button , the language pack and your own javascript (which perfom finally the action which you need). Here I call this script myplugin_buttonscript();

// Load the language file
tinyMCE.importPluginLanguagePack('myplugin', 'en');
var TinyMCE_mypluginscript = {
getInfo : function() {
return {
longname : 'myplugin',
author : 'Nobody',
authorurl : 'http://example.com',
infourl : 'http://example.com',
version : "1.0"
};
},
getControlHTML : function(cn) {
switch (cn) {
case "myplugin":
return tinyMCE.getButtonHTML(cn, 'lang_myplugin_desc', '{$pluginurl}/button.gif', 'mcemyplugin');
}
return "";
},
execCommand : function(editor_id, element, command, user_interface, value) {
switch (command) {
// Remember to have the "mce" prefix.
case "mcemyplugin":
// Call the script
myplugin_buttonscript();
return true;
}
return false;
}
};
// Adds the plugin class to the list of available TinyMCE plugins
tinyMCE.addPlugin("myplugin", TinyMCE_mypluginscript );

Note to the language pack
The Moxiecode wiki says that the related language file is placed in a subfolder “/langs” and it’s named with the language code which is predefined also in WPLANG (i.e. en_us.js) in your wp-config.php. This is a possible content :

// English lang variables
tinyMCE.addToLang('myplugin', {
desc : 'YOUR TEXT'
} );

6. Now we go back to your yourplugin.php and implement the myplugin_buttonscript();

// Load the Script for the Button(wp2.1)
function insert_myplugin_script() {
echo "\n".'

<script type="text/javascript">          function myplugin_buttonscript() {  window.open("URL TO A FILE");  }</script>';
return;
}

7. And finally we integrate this script into the header of the admin section.

add_action('edit_page_form', 'insert_myplugin_script');
add_action('edit_form_advanced', 'insert_myplugin_script');

8. Ups, don’t forget to integrate the buttonsnap class, to use it for the plain text editor. You can find a actual copy of buttonsnap.php form Owen Winkler and a good explanation at maxpower.ca .

// Needs to be loaded outside the class in order to work right
require(PLUGINURL. 'javascript/buttonsnap.php');

You can see it’s a lot of work for the integration, but I hope this small documentation help to get this working for you. If you have any recommendation or spelling correction for this article, it would be great if you leave a comment.

NOTE :

Sometime the new way of button integration failed and you didn’t see any buttons at all and the browser return a JavaScript Error : “TinyMCE not defined”.  I posted a workaround of this behaviour at trac here : http://trac.wordpress.org/ticket/3882