Ajax Action
a4j:ajax
a4j:commandButton
a4j:commandLink
a4j:actionListener
a4j:jsFunction
a4j:poll
a4j:push
a4j:param
Ajax Queue
a4j:queue
a4j:attachQueue
Ajax Output/Containers
a4j:outputPanel
a4j:status
a4j:region
a4j:mediaOutput
a4j:log
Validation
Client Side Validation
rich:graphValidator
rich:message
rich:messages
rich:notify
Data Iteration
a4j:repeat
rich:dataTable
rich:extendedDataTable
rich:collapsibleSubTable
rich:dataScroller
rich:list
rich:dataGrid
Trees
rich:tree
Tree Adaptors
Output/Panels
rich:chart
rich:panel
rich:togglePanel
rich:tabPanel
rich:collapsiblePanel
rich:accordion
rich:popupPanel
rich:progressBar
rich:tooltip
Menus
rich:panelMenu
rich:toolbar
rich:contextMenu
rich:dropDownMenu
Inputs
rich:autocomplete
rich:calendar
rich:editor
rich:inputNumberSlider
rich:inputNumberSpinner
rich:inplaceInput
rich:fileUpload
Selects
rich:inplaceSelect
rich:select
rich:orderingList
rich:pickList
Drag and Drop
Drag and Drop
Miscellaneous
Standard elements skinning
rich:placeholder
RichFaces functions
rich:focus
rich:componentControl
rich:hashParam
rich:hotKey
rich:jQuery

The rich:editor is input component acting as WYSIWYG editor.

Using attribute value, you can point editor's value into your model. For output of editor's value (HTML), you can use un-escaped output with <h:outputText escape="false" value="..." /> as in sample bellow.

Editor also throws semantical DOM events, similarly to standard input: change, init, focus, blur, dirty. You can react on these events both, with client-side behaviors or by programmatically with event handler attributes (oninit, etc.).

You can combine Editor's features to achieve more complex scenarios, in powerful declarative manner.

For example, you can simply achieve auto-saving feature with dirty DOM event and request delay configured using a4j:attachQueue behavior. Check out the sample bellow: you can change the value and either leave the editor (blur) or wait 4000 ms to trigger ajax update of output panel bellow.

Output from Editor

Little Red Riding Hood

"Little Red Riding Hood" is a famous fairy tale about a young girl's encounter with a wolf. The story has been changed considerably in its history and subject to numerous modern adaptations and readings.

International Names
Chinese 小紅帽
Italian Cappuccetto Rosso
Spanish Caperucita Roja

The version most widely known today is based on the Brothers Grimm variant. It is about a girl called Little Red Riding Hood, after the red hooded cape or cloak she wears. The girl walks through the woods to deliver food to her sick grandmother.

A wolf wants to eat the girl but is afraid to do so in public. He approaches the girl, and she naïvely tells him where she is going. He suggests the girl pick some flowers, which she does. In the meantime, he goes to the grandmother's house and gains entry by pretending to be the girl. He swallows the grandmother whole, and waits for the girl, disguised as the grandmother.

When the girl arrives, she notices he looks very strange to be her grandma. In most retellings, this eventually culminates with Little Red Riding Hood saying, "My, what big teeth you have!"
To which the wolf replies, "The better to eat you with," and swallows her whole, too.

A hunter, however, comes to the rescue and cuts the wolf open. Little Red Riding Hood and her grandmother emerge unharmed. They fill the wolf's body with heavy stones, which drown him when he falls into a well. Other versions of the story have had the grandmother shut in the closet instead of eaten, and some have Little Red Riding Hood saved by the hunter as the wolf advances on her rather than after she is eaten.

The tale makes the clearest contrast between the safe world of the village and the dangers of the forest, conventional antitheses that are essentially medieval, though no written versions are as old as that.