Rich text editing with editor
editor
is an input component that provides rich text editing features. It contains a toolbar that can also be configured with custom controls to provide more functionality to the user.
How to do it...
The basic component declaration for editor
, which renders default controls such as indentation and font and color selection would be as follows:
<p:editor value="#{editorController.text}" />
The component will be rendered on the page with default controls as shown in the following screenshot:

There's more...
The editor
component offers the controls
attribute, which can be used to customize the toolbar of the editor. For instance, the following declaration will render only three controls, bold
, italic
, and strikethrough
:
<p:editor value="#{editorController.text}" controls="bold italic strikethrough" />
The component will be rendered as shown in the following screenshot:

The list of available controls is as follows:
alignleft
alignright
bold
bullets
center...