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;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;



/**
 * 
 * @author Jeshurun Daniel
 *
 */
@Import(library={"context:/js/tinymce/jquery.tinymce.js",
"context:/js/tinymce/tiny_mce.js"})
public class TinyMCE {
	
	@Inject
	private JavaScriptSupport jsSupport;
	
	@InjectContainer
	private ClientElement element;

	
	@BeginRender
	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"/>