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

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>RichFaces Editor Example</title>
</h:head>
<h:body>
<h:form id="form">
<rich:editor id="editor" toolbar="full" value="#{editor.textArea}" style="margin-bottom: 1em">
<a4j:ajax event="change" render="panel" status="panelUpdateStatus" />
<a4j:ajax event="dirty" render="panel" status="panelUpdateStatus">
<a4j:attachQueue requestDelay="4000" />
</a4j:ajax>
</rich:editor>
<rich:panel id="panel">
<f:facet name="header">
Output from Editor
<a4j:status name="panelUpdateStatus">
<f:facet name="start">
(Updating)
</f:facet>
</a4j:status>
</f:facet>
<h:outputText escape="false" value="#{editor.textArea}" />
</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>

Managed Bean

// Editor.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Editor {
String textArea;
public String getTextArea() {
return textArea;
}
public void setTextArea(String textArea) {
this.textArea = textArea;
}
}

Output: