I’m currently working on a web project based on Wicket. In this web project there was a request for a web based word processor. TinyMce fits the bill perfectly and as it happens is also integrated in Wicket. Lucky me!

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("" + ed.selection.getContent() + "");
            	}
            });
		}
	});

	// 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", "
Insert headline here
" +
"Insert text here");

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.