Add Custom Button to Joomla's Article Editor (TinyMCE)

Question

I'm trying to insert an additional button in Joomla's article editor. It's using the default TinyMCE plug in Extended mode. As you'll already know there are 4 buttons underneath the editor (Article, Image, Page Break and Read More). What I'd like to do is insert a 5th button. (I did attach a image button SO said I can't post as need a minimum of 10 rep points.)

I have tried copying the Page Break Button plugin and renaming it etc, then re-installing it as a new plugin, but all that does it cause errors with TinyMCE and no button appears.

Question: How do I insert the button?

Answer 1

I've continued my extensive search and have found a guide on adding an additional button to the Article Editor for Joomla 1.5.

The tutorial is available at: http://tushev.org/articles/programming/18-how-to-create-an-editor-button-editors-xtd-plugin-for-joomla.

Straight out of the box this won't work with Joomla 2.5 and Joomla 3.0 as the XML manifest standards have changed ever-so-slightly. Keeping in line with the tutorial use this XML manifest instead.

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="plugin" method="upgrade" group="editors-xtd">
        <name>test</name>
        <author>Name</author>
        <creationDate>Month 2013</creationDate>
        <copyright>Month Name. All rights reserved.</copyright>
        <license>GPL</license>
        <authorEmail>Email</authorEmail>
        <authorUrl>Your URL</authorUrl>
        <version>1.0.0</version>
        <description>
            "adds the button 'test' to the editor"
        </description>
        <files>
            <filename plugin="test">test.php</filename>
        </files>
</extension>

The tutorial PHP is correct and is as follows:

<?php

 // no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

jimport( 'joomla.plugin.plugin' );

class plgButtonTest extends JPlugin {

    function plgButtonTest(& $subject, $config)
    {
        parent::__construct($subject, $config);
    }
    function onDisplay($name)
    {
        $js =  "                      
         function buttonTestClick(editor) {
                             txt = prompt('Please enter something','123');
                             if(!txt) return;
                               jInsertEditorText('{test '+txt+'}', editor);
        }";
        $css = ".button2-left .testButton {
                    background: transparent url(/plugins/editors-xtd/test.png) no-repeat 100% 0px;
                }";
        $doc = & JFactory::getDocument();
        $doc->addScriptDeclaration($js);
        $doc->addStyleDeclaration($css);
        $button = new JObject();
        $button->set('modal', false);
        $button->set('onclick', 'buttonTestClick(\''.$name.'\');return false;');
        $button->set('text', JText::_('Test'));
        $button->set('name', 'testButton');
        $button->set('link', '#');
        return $button;
    }
}
?>

Thank you all for your help. If you have any other better methods I'd be most grateful.