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.

I unpack it in "C:\Program Files\Subversion". To get the commands to work you have to add the bin to your path. In my case I add "C:\Program Files\Subversion\svn-win32-1.5.6\bin" to the path. After this I open up a command window and do the following:

mkdir subversionRepository
cd subversionRepository
svnadmin create project1

Now, in order to make Subversion work in Eclipse I add http://subclipse.tigris.org/update_1.6.x to my update sites. After downloading this I restart my Eclipse and go to Window -> Show View ->Other->SVN -> SVN Repositories.
I right click in the opened view and create a new repository location. Instead of writing a http adress in the URL window I now type "file:///C:/subversionRepository/project1". Notice the three forward slashes after "file:".

I now have an empty repository that I want to put my project into so I right click on the repository and add a new remote folder that I call trunk. Right clicking on the trunk I can now import my project by importing the folder that contains the .project file. I hit F5 to refresh the view and can see that the trunk is now filled with my first version of my project.

But I also have to associate the repository version with Eclipse, so now I right click in the Package Explorer and choose Import -> SVN -> Checkout Projects from SVN. I pick my previously created repository, click next, mark the trunk and then click finish. I get a question if I want to overwrite my previously created project with the same name and say ok. I won't need that now that I got a versioning system!

I can now finally continue my studies of the tool I was looking into.