Javatpoint Logo
Javatpoint Logo

RichFaces Editor

RichFaces provides the <rich:editor> component which is used to create a WYSIWYG editor in the HTML page.

The <rich:editor> component is based on the CKEditor implementation. When rendering a <rich:editor>, a textarea is rendered to the page, once the page is completely loaded.

Note: The <rich:editor> requires the <h:body> component to be present in the view and must be an ancestor of the editor in order for the resource dependencies to render correctly.

Style classes and skin parameters

The following table contains Style classes and corresponding skin parameters for the editor.

Class Skin Parameters Mapped CSS properties
.cke_skin_richfaces panelBorderColor border-color
.cke_skin_richfaces .cke_wrapper editorMainBackgroundColor background-color
.cke_skin_richfaces .cke_dialog_body panelBorderColor generalBackgroundColor border-color background
.cke_skin_richfaces .cke_dialog_title headerBackgroundColor headerWeightFont repeat-x font-weight
.cke_skin_richfaces .cke_path a, .cke_skin_richfaces .cke_path .cke_empty editorMainTextColor color
.cke_skin_richfaces .cke_button a.cke_on additionalBackgroundColor panelBorderColor background-color border-color
.cke_skin_richfaces .cke_button a:hover, .cke_skin_richfaces .cke_button a:focus, .cke_skin_richfaces .cke_button a:active tabBackgroundColor background-color


Here, in the following example, we are implementing <rich:editor> component. This example contains the following files.

JSF File

// editor.xhtml

Managed Bean



RichFaces Rich editor 1 RichFaces Rich editor 2

Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


B.Tech / MCA