How do I create an Editor Add-In?

Question

I've searched around, but I can't find how to do this. I'd like to add an extension to the wysiwig editor in Joomla. I'm writing a calendar plugin, and I'd like to have a dialog that would help the user construct the short code to insert into the article/page/module content.

What I do in another CMS is hook the editor so when they click on my button, a dialog appears that helps them select which short code, and set the various options. Then, when they click on OK, I insert the shortcode into the content. If anyone could point me to a web page or article on how to do this, I would be really appreciative.

Answer 1

Depending on the Editor there are several ways to extend the editor in Joomla — I'm going to assume you're talking about editors-xtd plugins. These are the buttons found below the main editor area.

There is a shortage of documentatoin on creating them so, as suggested, the best bet will be to look at existing editor extensions — I would start with the standard ones installed by default with Joomla. You can find the source code for them in the /plugins/editors-xtd/ directory of your Joomla installation.

You can find currently available ones listed on the Joomla Extension Directory here.

The editor-xtd plugins are like standard plugins so start with the Plugin Developer Overview article on Joomla Docs.

The main things to remember are:

1. the plugin group is defined in the plugins XML file as group="editors-xtd"
2. the event triggered to display your custom button is onDisplay()

As it sounds the onDisplay() method is where you return the do all the prep for the button (like assembling the HTML of the button). The onDisplay() method should end with you return that html...

return $html;

Obviously in that $html you can specify Javascript events to be triggered by clicking on the button.

To load the Javascript into the page you should use Joomla's standard approaches in your plugins PHP file:

// Get the current document
$doc = JFactory::getDocument();

// Build your Javascript
$js = '...'

// Add it to the document as script block
$doc->addScriptDeclaration($js);

// Or if you have a lot of JS, it's probably best in it's own file…
$jsFile = '/path/to/js/file.js';

// Add the link to the doc's head…
$doc->addScript($jsFile);

There are other methods Joomla provides to get and set the content of the editor, save it and to get the name of a method to insert text at the current cursor position in the editor.