将自定义按钮添加到Joomla的文章编辑器（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.

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.