Question

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

我正在使用Liferay Portal 6.0 EE。

Answer 1

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

Liferay 6.2+示例：

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

查看Liferay Faces Showcase了解实时示例和更多详情。

不推荐使用Liferay 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 Version Scheme。}

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> text\nand 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;
    }
}

输入的富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>

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

3 个答案: