Sunday, March 18, 2012

Wicket TinyMCE and AjaxButton

TinyMCE is a WYSIWYG editor, that can be used in Wicket to replace your TextAreas with a Rich Text Editor.

You need to add the following dependency into you pom.xml:

 <dependency>
     <groupId>org.wicketstuff</groupId>
     <artifactId>wicketstuff-tinymce</artifactId>
     <version>1.5.4</version>
 </dependency>


This would allow you to add TinyMceBehaviour to a TextArea that you want to transform into a  WYSIWYG editor.

TextArea contentTextArea = new TextArea("content");
// tinymce
contentTextArea.add(new TinyMceBehavior(new TinyMCESettings(Theme.advanced)));
        
contentTextArea.add(StringValidator.maximumLength(4000));
form.add(contentTextArea); 


Your <textarea> tag will be replaced by TinyMCE editor. On form submit, the content of TinyMCE editor is converted back into <textarea>.

TinyMCE does not work with AjaxButtons, as AjaxButton does not call Form submit event. There is a work around for this. You need to call triggerSave on your AjaxButton onClick event:

tinyMCE.triggerSave(true,true);

To do this just add TinyMceAjaxSubmitModifier to your AjaxButton:

ajaxButton.add(new TinyMceAjaxSubmitModifier()); 





1 comment:

  1. That's why there is wicket.contrib.tinymce.ajax.TinyMceAjaxButton

    ReplyDelete