Creating a TinyMce plugin for a Wicket application

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.

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:

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.

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

This Post Has 3 Comments

  1. We’re also looking into moving all our applications to Wicket from JSP. Can’t wait until we’re there…

  2. Thanks, helps me a lot.

    One comment: resources with plugin javascript works for me only from package wicket.contrib.tinymce.tiny_mce.plugins.boldmaker in src/main/java folder (not src/main/resources). Maybe it depends on actual pom.xml.

Leave a Reply

Close Menu