wicket-user-guide/src/main/asciidoc/wicketstuff/wicketstuff_2.adoc

Module tinymce offers integration with the namesake JavaScript library that turns our “humble” text-areas into a full-featured HTML WYSIWYG editor:

image::../img/tinymce.png[]

To “tinyfy” a textarea component we must use behavior TinyMceBehavior:

[source,java]
----
TextArea textArea = new TextArea("textArea", new Model(""));
textArea.add(new TinyMceBehavior());
----

By default TinyMceBehavior adds only a basic set of functionalities to our textarea:

image::../img/tinymce_basic.png[]

To add more functionalities we must use class TinyMCESettings to register additional TinyMCE plugins and to customize the toolbars buttons. The following code is an excerpt from example page FullFeaturedTinyMCEPage:

[source,java]
----
TinyMCESettings settings = new TinyMCESettings(
                       TinyMCESettings.Theme.advanced);
//...
// first toolbar
//...
settings.add(Button.newdocument, TinyMCESettings.Toolbar.first,
		      TinyMCESettings.Position.before);
settings.add(Button.separator, TinyMCESettings.Toolbar.first,
		      TinyMCESettings.Position.before);
settings.add(Button.fontselect, TinyMCESettings.Toolbar.first,
		      TinyMCESettings.Position.after);
//...
// other settings
settings.setToolbarAlign(
   		TinyMCESettings.Align.left);
settings.setToolbarLocation(
   		TinyMCESettings.Location.top);
settings.setStatusbarLocation(
   		TinyMCESettings.Location.bottom);
settings.setResizing(true);
//...
TextArea textArea = new TextArea("ta", new Model(TEXT));
textArea.add(new TinyMceBehavior(settings));
----

For more configuration examples see pages inside package wicket.contrib.examples.tinymce in the example project of the module.