Как добавить Liferay CKEditor в портлет JSF?

Вы можете добавить CKEditor на страницу JSF, включив банку портала Liferay Faces* в вашем проекте и написать код, аналогичный одному из следующих примеров:

Пример Liferay 6.2+:

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

Посетите витрину Liferay Faces, чтобы увидеть живые примеры и многое другое. Детали.

Пример устаревших версий 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 Faces и Liferay Portal.}

Используйте приведенный ниже код. Ссылка на витрину Liferay Faces

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

Заявитель.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;
}

ввод-богатый-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

Ты можешь использовать:

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