Using Tiny MCE with JSF and Glassfish
If you build a web application using the JSF Framework you can use different widgets using the MyFaces / Tomahawk Components. One of these widgets often used is the t:inputHtml Tag which supports a WYSIWYG Editor. The Editor included in the Tomahawk library is buid from the Kupu Editor. This editor is nice. But if you want to customize this editor you will not found much help. Another WYSIWYG Editor often taken in Web Applications is the TinyMCE Editor. This editor is documented well and you will find a lot of examples how to customize this edior for your web application.
Today I found the following link which explains how to integrate the TinyMCE Editor into a MyFaces application: http://wiki.apache.org/myfaces/WYSIWYG_Editor
I integrated the editor today in my glassfish and replaced my kupu widget with TinyMCE. It was realy simple:
- copy the /tiny_mce directory into the Glassfish root
..[glassfish]/domains/domain1/docroot/ - replace the t:inputHtml Tag inside your jsf page with the following code example:
<script src="/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "fullscreen",
theme_advanced_buttons1 : "fullscreen,undo,redo,cleanup,|,formatselect,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,outdent,indent,|,link,unlink,|,forecolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "none",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
width : "100%",
height : "260"
});
</script>
<h:inputTextarea id="description_id"
value="#{workitemBean.workitem['htmldetail'][0]}"/>
The result is a nice Editor component which can be customized in a lot of ways.
Posted at 09:02PM Jul 13, 2008
Posted by: Ralph
Category: General