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...