Sunday, February 22, 2009

RichFaces new TinyMCE Editor

JSF RichFaces released a new HTML/Rich Text editor on their latest version (3.3).Frankly, it is about time… It definitely took them a while. But better later than never…

The editor is a wrapper for the JavaScript WYSIWYG editor open source project.

Using the editor is very simple, assuming your project already using JSF RichFaces:

<rich:editor id="article" width="700" height="400"
    value="#{myBean.text}" required="true">
</rich:editor>


It is also possible to control the editor properties in the same manner TinyMCE editor is manipulated, buy simply adding editor specific properties. For example, in order to position the toolbar on the “top” and align the buttons to the left:

<rich:editor id="article" theme="advanced" viewMode="visual"
  width="700" height="400" value="#{myBean.text}" required="true">
  <f:param name="theme_advanced_toolbar_location" value="top" />
  <f:param name="theme_advanced_toolbar_align" value="left" />
</rich:editor>

5 comments:

  1. Thank you, it helps me.

    ReplyDelete
  2. Can you tell how to change color (background) of the editor

    ReplyDelete
  3. I don't know how to change the background color, but I can think of 2 ways of doing it:
    1) Try the component "style" or "styleClass"
    2) Search the TinyMCE documentation (http://tinymce.moxiecode.com/).
    There may be a parameter and and value you can pass to the component in order to change the background color.

    ReplyDelete
  4. how do you use spell check property of tinyMce in rich editor??

    ReplyDelete