Portal Showcase
portal:inputRichText
InputRichText is a UIInput component that renders a field for editing rich text.共通 Usage
The general usage is to support authoring of rich text as fragments of HTML.ソースコード
<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