How to Use RichTextToolbar in GWT

How to Use RichTextToolbar in GWT 

If you’ve ever tried to use the RichTextToolbar that is showcased in the Gwt Showcase, you will quickly find out that it’s not actually built into GWT.  Many GWT developers have experienced this WTFery, as their hopes to conveniently import RichTextToolbar have been dashed.  It is supposedly so that developers are not locked into using that toolbar, but of course, a good default is better than no default…

As you can see here, multiple bugs have been filed about this exact issue since 2008, to no avail!  Drats, I guess it is one of those things that has low priority because there’s a work-around, but it does affect a good number of developers, which should count for something.

Anyway, to use it in your code:

•     Navigate to <path>/gwt-2.0.3/samples/Showcase/src/com/google/gwt/sample/showcase/client/content/text on your computer, and you should see a bunch of icons, RichTextToolbar.java and RichTextToolbar$Strings.properties.

•     Copy RichTextToolbar.java and RichTextToolbar$Strings.properties and paste them into your source code folder and modify the package names accordingly.

•     Copy all the icons and paste them somewhere (I created a folder  <project>/client/icon)

•     In RichTextToolbar.java, above each “Image Resource…”, you will need to indicate the source of the image.  For example,

    @Source(“../icons/bold.gif”)

    ImageResource bold();

    if the directory you copied RichTextToolbar.java is under client.

That’s it, a little annoying, but hopefully it will find its way into GWT itself soon, though don’t hold your breath.

Also, you can easily play around with the Toolbar– I removed the bottom row of ListBoxes that give you lots of control over background and foreground colors, font and font sizes (I don’t want my users to have that much control over how my website looks!), and it ends up looking like this:

Hope that helps, and that it will save a few people some time!

Related posts: