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?

Buffon

Can you post your code? I take it the plugin installs and is in the right place and enabled. – Punishable

Hi Elin, I considered posting the code but it won't help as it's the code already available for the 'page break' button which comes with the default Joomla install. The plugin is enabled and in the same location as the other editor-xtd plugins. – Sirajuddaula

If it is just completely a copy you most likely failed to change one of the places where the name has to match something in the xml. – Punishable

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.

Buffon

thankfully you put the code here as the tutorial link doesn't work right now. – Mantis

Answer 2

If your plugin installed successfully,then you have to put your plugin name into the Custom plugin and Custom button in the advanced parameters setting in tinymce plugins.And make sure your installed plugins is published.See the image below for example.

This is my custom plugin which is set enabled.see this image :

And then in the tinymce plugin go to advanced parameter and see at very last end there is the custom fields option.see this image:

Enter the plugins name and button name.And locate your button in the article manager editor.

Cancer

That's only if you want to add a tinymce button not if you want to add a button underneath which would be an editor-xtd plugin. – Punishable

Thanks Tornado. This is ideal for adding a custom icon button to the toolbars but I'm hoping for a larger one like the 'Read More' button. Thank you for using a graphic it helps greatly! +1 for use of images. – Sirajuddaula