如何将Liferay的CKEditor添加到我的JSF组件中？

Question

我想将Liferay的CKEditor添加到JSF portlet中。我试图找到一种在JSF中添加CKEditor的方法，但所有的示例/解决方案都显示了如何在JSP中添加CKEditor而不是JSF。

我使用的是Liferay Portal 6.0 EE。

Answer 1

您可以通过在项目中包含Liferay Faces Portal jar*来将CKEditor添加到JSF页面，并编写类似于以下示例之一的代码:

Liferay 6.2+示例:

<portal:inputRichText value="#{backing.value}" />

查看Liferay Faces Showcase的现场示例和更多细节。

已弃用6.2和6.1示例:

<liferay-ui:input-editor editorImpl="editor.wysiwyg.default" value="#{backing.value}">

已弃用的Liferay 6.0 EE示例:

<liferay-ui:input-editor editorImpl="ckeditor" value="#{backing.value}">

^{*由于您使用的是Liferay 6.0 EE，您需要使用LF Portal版本3.0.5-ga6。有关兼容Liferay Faces和Liferay Portal版本的更多信息，请参阅Liferay Faces版本计划。}

Answer 2

使用下面的代码。参考Liferay Faces Showcase

inputRichText.xhtml

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

InputRichTextBacking.java

@ManagedBean
@RequestScoped
public class InputRichTextBacking {
    private static final Logger logger = LoggerFactory.getLogger(InputRichTextBacking.class);
    private Applicant applicant;
    private boolean resizable = true;
    @PostConstruct
    public void init() {
        applicant = new Applicant();
        if (ViewParamUtil.getUsage().equals("default-value")) {
            applicant.setComments(
                "<p>This is some <strong>bold</strong> textnand this is some <em>italic</em> text.</p>");
        }
    }
    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.getName();
        FacesMessage facesMessage = new FacesMessage("The valueChangeListener method was called during the " +
                phaseName + " phase of the JSF lifecycle.");
        facesContext.addMessage(null, facesMessage);
    }
    public Applicant getApplicant() {
        return applicant;
    }
    public boolean isResizable() {
        return resizable;
    }
    public void setResizable(boolean resizable) {
        this.resizable = resizable;
    }
}

Applicant.java

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 void setCity(String city) {
        this.city = city;
    }
    public String getComments() {
        return comments;
    }
    public void setComments(String comments) {
        this.comments = comments;
    }
    public Date getDateOfBirth() {
        return dateOfBirth;
    }
    public void setDateOfBirth(Date dateOfBirth) {
        this.dateOfBirth = dateOfBirth;
    }
    public String getEmailAddress() {
        return emailAddress;
    }
    public void setEmailAddress(String emailAddress) {
        this.emailAddress = emailAddress;
    }
    public String getFirstName() {
        return firstName;
    }
    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }
    public String getLastName() {
        return lastName;
    }
    public void setLastName(String lastName) {
        this.lastName = lastName;
    }
    public String getPhoneNumber() {
        return phoneNumber;
    }
    public void setPhoneNumber(String phoneNumber) {
        this.phoneNumber = phoneNumber;
    }
    public String getPostalCode() {
        return postalCode;
    }
    public void setPostalCode(String postalCode) {
        this.postalCode = postalCode;
    }
    public Long getProvinceId() {
        return provinceId;
    }
    public void setProvinceId(Long provinceId) {
        this.provinceId = provinceId;
    }
}

input-rich-text.css

/* 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;
}

input-rich-text.properties

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

Answer 3

您可以使用:

<aui:fieldset>
    <script type="text/javascript">
             function <portlet:namespace />initEditor() {
        }
    </script>
    <aui:field-wrapper label="content">
        <liferay-ui:input-editor width="100%" />
        <aui:input name="content" type="hidden" />
    </aui:field-wrapper>
</aui:fieldset>