Home » RichFaces Rich:Editor

RichFaces Rich:Editor

by Online Tutorials Library

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

Example

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

JSF File

// editor.xhtml

Managed Bean

// Editor.java

Output:

RichFaces Rich editor 1 RichFaces Rich editor 2


You may also like