Another request required me to make my own plugin for TinyMce. Only, it turned out it's not the simplest thing to do, adding a plugin to TinyMce when it's integrated to Wicket. There is almost no help on how to do this so, after having fiddled with this for some time I thought I should help all other plugin creators out there.

Here we'll make a very redundant BoldMakerPlugin just because it's so easy to se it working. I'm assuming that you've got Wicket and also that you have managed to get TinyMce running, if you haven't it's just a matter of cut and paste from WicketStuffs TinyMce page.

To create a plugin you will need two files. Your plugin java file and an editor_plugin_src.js file. I placed my java file among the other wicket java files under src/main/java and named it BoldMakerPlugin.java. This is what it looks like.

 
import wicket.contrib.tinymce.settings.Plugin;
import wicket.contrib.tinymce.settings.PluginButton;
 
public class BoldMakerPlugin extends Plugin{
 
	private PluginButton boldMakerButton;
 
	public BoldMakerPlugin(){
		super("boldmaker");//decides which plugin folder to look in.
		boldMakerButton = new PluginButton("boldmakerbutton", this);
	}
 
	public PluginButton getBoldMakerButton(){
		return boldMakerButton;
	}
}
 

Next I have to fool the TinyMce main script that my plugins JavaScript file is actually located in the same location as the other scripts. I do this by creating a package structure that is similar to what the TinyMce jar file uses. In this case I create a package called wicket.contrib.tinymce.tiny_mce.plugins.boldmaker and put it in src/main/resources. The last package should be similar to whatever you insert into your superclass from your java file.

In this location I put my editor_plugin_src.js file. Mine looks like this:

 
(function() {
	var DOM = tinymce.DOM;
 
	tinymce.create('tinymce.plugins.BoldMakerPlugin', {
		init : function(ed, url) {
			var t = this, s = {};
 
			t.editor = ed;
 
			// Register commands
			ed.addCommand('mceBoldMaker', function() {
				var win, de = DOM.doc.documentElement;
			});
 
			// Register buttons
			ed.addButton('boldmakerbutton', {title : 'Test', cmd : 'mceBoldMaker', image : url + '/../test/img/example.gif',
         	   onclick: function() {
         	   		ed.selection.setContent("<b>" + ed.selection.getContent() + "</b>");
            	}
            });
		}
	});
 
	// Register plugin
	tinymce.PluginManager.add('boldmaker', tinymce.plugins.BoldMakerPlugin);
})();
 

Don't worry if you don't have a button image just yet, it'll be an invisible button with the plugin functionality.

After having done this you should compress it using some kind of JavaScript compressor. I used the one on http://javascriptcompressor.com/
Create a new file, name it “editor_plugin.js” and paste your newly compressed JavaScript into it.

I'm adding my plugin in a InPlaceEditComponent instead of in a TextArea but the basics are the same. Add your plugin to the TinyMCESettings, add the settings to the component and then add your component to your page.

 
InPlaceEditComponent component = new InPlaceEditComponent("editable", "
<h4 class='headline' style='color: black; font-weight: bold; font-family: sans-serif; font-size: 80%;'>Insert headline here</h4>
 
" +
"<span class='standardText' style='color: black; font-family: sans-serif; font-size: 80%;'>Insert text here</span>");
 
TinyMCESettings settings=component.getSettings();
 
BoldMakerPlugin boldMakerPlugin=new BoldMakerPlugin();
settings.add(boldMakerPlugin.getBoldMakerButton(), Toolbar.first, Position.before);
 
component.add(new InPlaceEditBehavior(settings, component));
item.add(component);
 

If you've done everything correctly you should now be able to run your application and get your very first plugin working.

1. wicket-event.js
2. wicket-ajax.js

wicket-event.js

This file contains everything Wicket needs for event handling, but also methods for detecting browser like Wicket.Browser.isIELessThan7() which could come in handy if youre doing your own script, no need to write it again..

wicket-ajax.js

This file hold everything Wicket needs for doing ajax. So it's a big file containing a lot of interesting possibilities.

The most interesting method are wicketAjaxGet its the way to contact the server doing ajax. It's signature are this:

 
function wicketAjaxGet(url, successHandler, failureHandler, precondition, channel)
 

The first parameter are the url for wicketAjaxGet to call server side with, it usually gets generated from serverside, and you can add parameters to it and get them server side. Furthermore it takes 3 functions and a channel. Channel are also usually populated for you so dont think about that. The functions however are called either on sucess, failure or as a precondition. These supply very nice options for you if you need to do something special with the result of the wicketAjaxGet you can put in callbacks. Small example from the mooTip ajax integration:

 
function mootipAjaxtooltip022(callback) {
var content='';wicketAjaxGet('?wicket:interface=:0:tooltip02::IBehaviorListener:1:',
 function(){
 var tip=document.getElementById('mooTipContent').innerHTML;
 var callbackInside=callback;
 var runCallback=  callbackInside.pass(tip);
 runCallback();
  }
, null,null);
 

As you can see, if you count the parameters, I put in a success method for wicket to call once the request has finished, in this case it sets up a tooltip and displays it, by a method thats passed along using the content of the dom element called 'mooTipContent'.

Theres also lighter methods like for example wicketHide and wicketshow. Methods for manipulating visibility of dom objects. Theres many more functions in there. But these should get you going.

The complete package

A small example that shows a invisible veil when a abstractajaxTimerEventBehavior is called:

 
css/html:
#veil{
position:absolute;top:0;left:0;
 width:100%;height:100%;
 z-index: 99;
 /*cursor: wait;*/
 }
<"p id="veil" style='display: none;' "><"/p">
Java:
		AbstractAjaxTimerBehavior ajaxTimerBehavior = new AbstractAjaxTimerBehavior(
				Duration.seconds(1)) {
			@Override
			protected CharSequence getCallbackScript() {
				// TODO Auto-generated method stub
				return "wicketShow('veil');" + super.getCallbackScript();
			}
 
			@Override
			protected CharSequence getSuccessScript() {
				// TODO Auto-generated method stub
				return "wicketHide('veil');" + super.getSuccessScript();
			}
....
 

And thats it, now you should be ready to do your own stuff