Primefaces Editor

by Online Tutorials Library July 14, 2022

PrimeFaces Editor

PrimeFaces provides <p:editor> component which is used to create an editor in JSF application. We can use this editor to get user input in large amount. This editor provides editing and formating tools that we can use to format our input. We can also use it to send formated email. It includes rich attributes that are tabled below.

Editor Attributes

Attribute	Default value	Return type	Description
id	null	String	It is an unique identifier of the component.
rendered	true	Boolean	It is used to specify the rendering of the component.
value	null	Object	It is used to set value of the component.
required	null	Boolean	It is used to mark component as required.
validator	null	Method Expr	It is a method expression that refers to a method validationg the input.
height	null	Integer	It is used to set height of the editor.
width	null	Integer	It is used to set widthit of the editor.
disabled	false	Boolean	It is used to disable editor.
style	null	String	It is used to set inline CSS of the editor container.
onchange	null	String	It is used to execute script when editor data changes.
maxlength	null	Integer	It is used to set maximum length of the raw input.

Ajax Behavior Events

SelectCeckboxMenu provides an Ajax event in addition to common dom events like change, selectCheckboxMenu.

Style Class	Applies
.ui-editor	It is used for main container.
.ui-editor-toolbar	It applies on toolbar of editor.
.ui-editor-group	It applies on button groups.
.ui-editor-button	It is used for Each button.
.ui-editor-divider	It is used for divider to separate buttons.
.ui-editor-disabled	It is used to disable editor controls.
.ui-editor-list	It applies on dropdown lists.
.ui-editor-color	It applies on color picker.

Example

Here, in the following example, we are implementing <p:editor> component. This example contains the following files.

JSF File

// editor.xhtml

  <?xml version=’1.0′ encoding=’UTF-8′ ?>  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  <html xmlns=”http://www.w3.org/1999/xhtml”  xmlns:h=”http://xmlns.jcp.org/jsf/html”  xmlns:p=”http://primefaces.org/ui”>  <h:head>  <title>Editor</title>  </h:head>  <h:body>  <h2></h2>  <h:form>  <p:editor id=”editor” widgetVar=”editorWidget” value=”#{editor.text}” width=”600″ /><br/>  <p:commandButton value=”Submit” icon=”ui-icon-disk” />  <p:commandButton value=”Clear” type=”button” onclick=”PF(‘editorWidget’).clear();” icon=”ui-icon-close” />  </h:form>  </h:body>  </html>  

ManagedBean

// Editor.java

  package com.tutoraspire;  import javax.faces.bean.ManagedBean;  @ManagedBean  public class Editor {  private String text;  public String getText() {  return text;  }  public void setText(String text) {  this.text = text;  }  }  

Output:

Primefaces Editor 1
Primefaces Editor 2

Next TopicPrimeFaces InputText