Integrating TinyMCE with Tapestry 5 and jQuery

If you use Tapestry5-jQuery in your Tapestry 5 project, you can easily integrate the TinyMCE Rich Text Editor as a mixin for textareas in your form.

  • Download TinyMCE jQuery package from here.
  • Add all the downloaded files, including the langs and themes folder into a folder in your Web application context. For example, add all the files and folders to the Your_Project/WebContent/js/tinymce/ folder
  • Add the following class to your mixins package.
import org.apache.tapestry5.ClientElement;
import org.apache.tapestry5.annotations.BeginRender;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectContainer;
import org.apache.tapestry5.ioc.annotations.Inject;

 * @author Jeshurun Daniel
public class TinyMCE {
	private JavaScriptSupport jsSupport;
	private ClientElement element;

	void begin() {
		jsSupport.addScript("tinyMCE.init({ mode : "exact", elements: "%s" });", element.getClientId());
  • To use it, simply add the mixin to any element you want, such as textareas or textfields.
<t:textarea value="value"  t:mixins="tinymce"/>

Leave a Reply

Your email address will not be published.

5 × 1 =