PrimeFaces User!

s Guide

3.31 Editor
Editor is an input component with rich text editing capabilities.

Info
Tag Component Class Component Type Component Family Renderer Type Renderer Class editor org.primefaces.component.editor.Editor org.primefaces.component.Editor org.primefaces.component org.primefaces.component.EditorRenderer org.primefaces.component.editor.EditorRenderer

Attributes
Name id rendered binding value converter Default null TRUE null null null Type String Boolean Object Object Converter/ String Description Unique identifier of the component. Boolean value to specify the rendering of the component. An el expression that maps to a server side UIComponent instance in a backing bean. Value of the component than can be either an EL expression of a literal text. An el expression or a literal text that defines a converter for the component. When its an EL expression, its resolved to a converter instance. In case its a static text, it must refer to a converter id.

166

PrimeFaces User!s Guide

Name immediate

Default FALSE

Type Boolean

Description When set true, process validations logic is executed at apply request values phase for this component. Marks component as required. A method expression that refers to a method validationg the input. A method expression that refers to a method for handling a valuchangeevent. Message to be displayed when required field validation fails. Message to be displayed when conversion fails. Message to be displayed when validation fails. Name of the client side widget. List of controls to customize toolbar. Height of the editor. Width of the editor. Disables editor. Inline style of the editor container. Style class of the editor container. Client side callback to execute when editor data changes.

required validator valueChangeListener requiredMessage converterMessage validatorMessage widgetVar controls height width disabled style styleClass onchange

FALSE null null null null null null null null null FALSE null null null

Boolean MethodExpr MethodExpr String String String String String Integer Integer Boolean String String String

Getting started with the Editor Rich Text entered using the Editor is passed to the server using value expression.
public class Bean { ! ! ! private String text; //getter and setter

<p:editor value="#{bean.text}" />

167

PrimeFaces User!s Guide

Custom Toolbar Toolbar of editor is easy to customize using controls option;

<p:editor value="#{bean.text}" controls="bold italic underline strikethrough" />

Here is the full list of all available controls; bold italic underline strikethrough subscript superscript font size style color highlight bullets numbering alignleft center alignright justify undo redo rule image link unlink cut copy paste pastetext print source outdent indent removeFormat

Client Side API Widget: PrimeFaces.widget.Editor

Method init() saveHTML() clear() Params Return Type void void void
168

Description Initializes a lazy editor, subsequent calls do not reinit the editor. Saves html text in iframe back to the textarea. Clears the text in editor.

PrimeFaces User!s Guide

Method enable() disable() focus() selectAll() getSelectedHTML() getSelectedText()

Params -

Return Type void void void void String String Enables editing. Disables editing.

Description

Adds cursor focus to edit area. Selects all text in editor. Returns selected text as HTML. Returns selected text in plain format.

Skinning Following is the list of structural style classes.

Style Class .ui-editor .ui-editor-toolbar .ui-editor-group .ui-editor-button .ui-editor-divider .ui-editor-disabled .ui-editor-list .ui-editor-color .ui-editor-popup .ui-editor-prompt .ui-editor-message Main container. Toolbar of editor. Button groups. Each button. Divider to separate buttons. Disabled editor controls. Dropdown lists. Color picker. Popup overlays. Overlays to provide input. Overlays displaying a message. Applies

Editor is not integrated with ThemeRoller as there is only one icon set for the controls.

169