PrimeFaces Text Editors

May 31, 2016

Overview

PrimeFaces is an open source user interface component library for JavaServer Faces (JSF) based applications. JSF is a server-side component framework for building Java technology based web applications.

PrimeFaces provides three text editors as input components. These are used in web pages. One of them is a plain text editor and is an enhanced version of the standard JSF's inputTextarea component. The other two are HTML rich text editors; one is available in the base PrimeFaces library (p:editor) and the other (pe:ckEditor) as part of the PrimeFaces extensions library.

This example app shows the basic usage of these three editors. The following are the contents in this post:

p:inputTextarea
p:editor
pe:ckEditor
Download
Useful Links

1. p:inputTextarea

JSF's inputTextarea tag is a multi-row plain text field and allows a user to enter a multiline string. This component is rendered as an HTML <textarea> element. PrimeFaces's inputTextarea is an extension to standard inputTextarea with autoComplete, autoResize, remaining characters counter and theming features. This component is available as part of PrimeFaces standard library.

The following example shows the basic usage of the PrimeFaces inputTextarea. Plain unformatted text can be entered in it. This text content can be viewed, stored or printed. In the example, enter some text and print the output within the same page.

The following screenshot shows the editor within the example's JSF page.

The following code snippet shows the inputTextarea tag as used in the example's JSF page (textarea.xhtml). The text entered is passed to the server side managed bean property using a value expression. The autoResize attribute specifies auto growing of the text area as text is typed; the default value is true and here it is turned off. The CSS style specifies the width and height of the text area, and padding in the text area and the font size of the text entered.

<p:inputTextarea id="textarea"  
	value="#{bean.text}"
	autoResize="false"
	style="font-size:16px; width:700px; height:200px; padding:8px;">
</p:inputTextarea>

The following code snippet is from the managed bean wired to the text area:

@ManagedBean(name="bean")
@ViewScoped
public class EditorsBean implements Serializable {

	private String text;

	public String getText() {	
		return text;
	}
	public void setText(String s) {	
		text = s;
	}
	...
}

2. p:editor

PrimeFaces editor is an input component with rich text editing capabilities. The following screenshot shows the editor within the example's JSF page.

The editor component tag is available as part of PrimeFaces standard library. This component also has the features of the normal JSF input components like, value, configuration of a value change listener, convertor and validator, setting the CSS style, onchange client side callback, etc.

The rich text editor (a WYSIWYG HTML editor) has features like text attributes (bold...), font attributes (size, color...), style, bullets and numbering, insert images, links, text alignment, redo, undo, print, etc. These functions are available as controls (buttons) in a tool bar. The position and the controls to be used are configurable. The complete list of the controls is listed in the PrimeFaces user guide.

The entered and formatted text can be wired to a JSF managed bean attribute using a value expression. The following code snippets show the editor's configuration in the JSF page (peditor.xhtml) and the corresponding managed bean's code. The managed bean's attribute captures the HTML code as a String.

<p:editor id="ed"
	value="#{bean2.text}"
	width="800" height="250"
	widgetVar="editor" 
	controls="bold italic underline | font size style color highlight | 
		bullets numbering | alignleft center alignright justify | 
		undo redo | rule image link unlink | copy cut paste pastetext | 
		print | outdent indent | removeformat"/>

The managed bean code:

@ManagedBean(name="bean2")
@ViewScoped
public class EditorsBean2 implements Serializable {

	private String text;

	public String getText() {
		return text;
	}
	public void setText(String s) {
		text = s;
	}
	...
}

This component also has client side API to select all text, get selected text as HTML or plain format, etc. Some of these are shown in the example: clear (clears the text in the editor), disable and enable (these functions make the editor read-only and then back to editable mode respectively). Here is the code snippet showing the usage of clear:

<p:commandButton value="Clear" type="button" onclick="PF('editor').clear();" />

The example also has buttons to print the HTML code, the formatted text and also plain text from the editor content. The HTML code is directly printed from the managed bean's String attribute value. The formatted output is printed using the following JSF page code:

<h:outputText id="outformat" value="#{bean2.text}" escape="false" />

The plain text is extracted from the HTML text using the jsoup, a Java HTML parser library: https://jsoup.org/. The code to extract can be viewed in the downloadable source code.

3. pe:ckEditor

CKEditor is a HTML rich text editor. It's a WYSIWYG editor and has common word processor features. CKEditor is an open source application for usage in web pages: http://ckeditor.com/

The CKEditor is integrated with the PrimeFaces and is available as part of the PrimeFaces extensions library, as ckEditor component. This also has the features of the normal JSF input components like, configuration of convertor and validator, value, etc., and additional attributes like skin, theme, toolbar, and a custom configurator for the CKEditor.

The following screenshot shows the editor within the example's JSF page.

This also supports a set of ajax events like save, initialize, focus, change, blur, etc. For example, the save ajax event can be used to pass the editor content to the server side managed bean property and then store the content in a database:

<p:ajax event="save" listener="#{editorManager.saveListener} />

The rich text editor functions are available as buttons in a tool bar. The position and the buttons to be used can be configured. The complete list of the buttons is found at: http://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic

The edited and formatted text can be wired to a JSF managed bean attribute using a value expression. The following code snippets show the editor's configuration in the JSF page (pxeditor.xhtml) and the corresponding managed bean's code. The managed bean's attribute captures the HTML code as a String.

<pe:ckEditor id="ed"
	value="#{bean2.text}"
	height="200" width="800"
	toolbar="[ 
	['Cut','Copy','Paste','PasteText','PasteFromWord','-','SelectAll'],
	['Bold','Italic','Underline','-','RemoveFormat'],
	['NumberedList','BulletedList','-','Outdent','Indent','-',
	'JustifyLeft', 'JustifyCenter','JustifyRight','JustifyBlock'],'/',
	['Save'],['NewPage','Preview','Print'],['Link', 'Unlink'],
	['Image','Table','HorizontalRule','Smiley', 'SpecialChar',
	'PageBreak'],['Find','Replace'],['Undo','Redo'],'/',
	['Styles', 'Format','Font','FontSize'],
	['TextColor','BGColor'],['Scayt']]">
	
	<p:ajax event="save" listener="#{bean2.saveCkeditorContentListener}"
		update="growlid" />
</pe:ckEditor>

The managed bean code:

@ManagedBean(name="bean2")
@ViewScoped
public class EditorsBean2 implements Serializable {

	private String text;

	public String getText() {
		return text;
	}
	public void setText(String s) {
		text = s;
	}
	...
}

The example editor's toolbar is configured with the 'save' button (the disk icon in the toolbar). On pressing this button the ajax 'save' event is fired and the action listener is executed. Here a p:growl message is displayed indicating the save action.

<h:outputText id="outformat" value="#{bean2.text}" escape="false" />

The plain text is extracted from the HTML text using the jsoup, a Java HTML parser library: https://jsoup.org/. The code to extract can be viewed in the downloadable source code.

4. Download

Source code: PrimeFacesTextEditorsExample.zip
Deployable WAR file: pfeditors.war

The example uses Java SE 8, JavaServer Faces 2 (Apache MyFaces 2.0.16), PrimeFaces 5.1 and PrimeFaces extensions 4.0. The WAR file can be deployed on a Tomcat 7 web server or a GlassFish 4 application server.

5. Useful Links

PrimeFaces: http://primefaces.org/
PrimeFaces download: http://primefaces.org/downloads
PrimeFaces user guide: http://www.primefaces.org/documentation
PrimeFaces extenstions: http://primefaces-extensions.github.io/
jsoup: https://jsoup.org/
jsoup API: https://jsoup.org/apidocs/

Return to top