portal:inputRichText

InputRichText is a UIInput component that renders a field for editing rich text.

General Usage

The general usage is to support authoring of rich text as fragments of HTML.

Codi font

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"	xmlns:portal="http://liferay.com/faces/portal">

	<h:outputStylesheet library="css" name="input-rich-text.css" />
	<h:form id="exampleForm">
		<span>
			<label class="component-required-label">
				<h:selectBooleanCheckbox id="renderedCheckbox" immediate="true"
					value="#{showcaseModelBean.selectedComponent.rendered}">
					<f:ajax render="@form" />
				</h:selectBooleanCheckbox>
			</label>
		</span>
		<h:message id="commentsMessage" for="comments" />
		<!-- Note: In this example, portal:inputRichText is intentionally not a child of showcase:field in order -->
		<!-- to prevent it from being unnecessarily reinitialized when the showcase:field is re-rendered via Ajax. -->
		<portal:inputRichText id="comments" label="#{i18n['comments']}"
			required="#{showcaseModelBean.selectedComponent.required}"
			value="#{inputRichTextBacking.applicant.comments}" />
		<h:commandButton actionListener="#{inputRichTextBacking.submit}" value="#{i18n['submit']}">
			<f:ajax execute="@form" render="commentsField :modelValue" />
		</h:commandButton>
	</h:form>
	<h:outputText id="modelValue" value="#{inputRichTextBacking.applicant.comments}" />

</ui:composition>
@ManagedBean
@RequestScoped
public class InputRichTextBacking {

	private static final Logger logger = LoggerFactory.getLogger(InputRichTextBacking.class);

	private Applicant applicant;
	private boolean resizable = true;

	public Applicant getApplicant() {
		return applicant;
	}

	@PostConstruct
	public void init() {

		applicant = new Applicant();

		if (ViewParamUtil.getUsage().equals("default-value")) {
			applicant.setComments(
				"<p>This is some <strong>bold</strong> text<br />\nand this is some <em>italic</em> text.</p>");
		}
	}

	public boolean isResizable() {
		return resizable;
	}

	public void setResizable(boolean resizable) {
		this.resizable = resizable;
	}

	public void submit() {
		logger.info("You entered comments: " + applicant.getComments());
	}

	public void valueChangeListener(ValueChangeEvent valueChangeEvent) {

		FacesContext facesContext = FacesContext.getCurrentInstance();
		PhaseId phaseId = facesContext.getCurrentPhaseId();
		logger.debug("valueChangeListener: phaseId=[{0}]", phaseId.toString());

		String phaseName = phaseId.toString();
		FacesMessage facesMessage = new FacesMessage("The valueChangeListener method was called during the " +
				phaseName + " phase of the JSF lifecycle.");
		facesContext.addMessage(null, facesMessage);
	}
}
public class Applicant implements Serializable {

	private static final long serialVersionUID = 4661552363081858711L;

	private String city;
	private String comments;
	private Date dateOfBirth;
	private String emailAddress;
	private String firstName;
	private String lastName;
	private String phoneNumber;
	private String postalCode;
	private Long provinceId;

	public String getCity() {
		return city;
	}

	public String getComments() {
		return comments;
	}

	public Date getDateOfBirth() {
		return dateOfBirth;
	}

	public String getEmailAddress() {
		return emailAddress;
	}

	public String getFirstName() {
		return firstName;
	}

	public String getLastName() {
		return lastName;
	}

	public String getPhoneNumber() {
		return phoneNumber;
	}

	public String getPostalCode() {
		return postalCode;
	}

	public Long getProvinceId() {
		return provinceId;
	}

	public void setCity(String city) {
		this.city = city;
	}

	public void setComments(String comments) {
		this.comments = comments;
	}

	public void setDateOfBirth(Date dateOfBirth) {
		this.dateOfBirth = dateOfBirth;
	}

	public void setEmailAddress(String emailAddress) {
		this.emailAddress = emailAddress;
	}

	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}

	public void setLastName(String lastName) {
		this.lastName = lastName;
	}

	public void setPhoneNumber(String phoneNumber) {
		this.phoneNumber = phoneNumber;
	}

	public void setPostalCode(String postalCode) {
		this.postalCode = postalCode;
	}

	public void setProvinceId(Long provinceId) {
		this.provinceId = provinceId;
	}
}
/* The Liferay Portal margin-bottom is 30px for div elements with class="control-group" (such as alloy:field). */
/* Set the margin-bottom to zero since the portal:inputRichText is not a child of the alloy:field component tag. */ 
.aui div.input-rich-text-field.control-group {
	margin-bottom: 0px;
}

.aui div.portal-input-rich-text {
	margin-bottom: 30px;
}
#
# The default key used by the editorImpl attribute is found in the Liferay portal.properties file:
#
#     editor.wysiwyg.default=ckeditor
#
# For more information, see:
#
#     https://github.com/liferay/liferay-portal/blob/6.2.1-ga2/portal-impl/src/portal.properties#L5282
#
# Alternate keys for BBCode and Creole can be specified in a custom portal-ext.properties file.
#
# For example:
#
com.liferay.faces.demos.showcase.ckeditor=ckeditor
com.liferay.faces.demos.showcase.ckeditor_bbcode=ckeditor_bbcode
com.liferay.faces.demos.showcase.ckeditor_creole=ckeditor_creole
Liferay Faces Bridge Implementation 5.0.0 + Liferay Faces Portal 5.0.0 + Showcase Common 3.1.1 + Liferay Faces Util 3.4.1 + Mojarra 2.2.20