$form

The form demonstrates a custom RichTextArea control using the TinyMCE JavaScript library. The control overrides the Field method getHtmlImports() to include its JavaScript imports automatically:

protected static final String HTML_IMPORTS =
    "<script type=\"text/javascript\" src=\"{0}/tiny_mce/tiny_mce.js\"></script>\n";

public String getHtmlImports() {
    String[] args = { getContext().getRequest().getContextPath() };
    return MessageFormat.format(HTML_IMPORTS, args);
}

The control is rendered using a Velocity template (/examples/control/RichTextArea.htm) which loaded from the classpath:

${textArea}
<script type="text/javascript">
tinyMCE.init({
   theme : "${theme}",
   mode : "exact",
   elements : "${id}"
});
</script>

The control's toString() method merges the RichTextArea.htm template and the model returning rendred HTML.

public String toString() {
    Map model = new HashMap();
    model.put("textArea", super.toString());
    model.put("theme", getTheme());
    model.put("id", getId());

    return getContext().renderTemplate(getClass(), model);
}