

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

!tinymce.png!

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

{code}
TextArea textArea = new TextArea("textArea", new Model(""));
textArea.add(new TinyMceBehavior());
{code}

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

!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:

{code}
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));
{code}

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