Adding a WYSIWYG Editor to a Portlet

It’s easy to include WYSIWYG editors in your portlet, thanks to the <liferay-ui:input-editor /> tag. Below is an example configuration:

<%@ taglib prefix="liferay-ui" uri="http://liferay.com/tld/ui" %>

<div class="alloy-editor-container">
    <liferay-ui:input-editor
        contents="Default Content"
        cssClass="my-alloy-editor"
        editorName="alloyeditor"
        name="myAlloyEditor"
        placeholder="description"
        showSource="true" />
</div>

It is also possible to pass JavaScript functions through the onBlurMethod, onChangeMethod, onFocusMethod, and onInitMethod attributes. Here is an example configuration that uses the onInitMethod attribute to pass a JavaScript function called OnDescriptionEditorInit:

<%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>
<%@ taglib prefix="liferay-ui" uri="http://liferay.com/tld/ui" %>

<div class="alloy-editor-container">
    <liferay-ui:input-editor
        contents="Default Content"
        cssClass="my-alloy-editor"
        editorName="alloyeditor"
        name="myAlloyEditor"
        onInitMethod="OnDescriptionEditorInit"
        placeholder="description"
        showSource="true" />
</div>

<aui:script>
    function <portlet:namespace />OnDescriptionEditorInit() {
        <c:if test="<%= !customAbstract %>">
            document.getElementById('<portlet:namespace />myAlloyEditor').setAttribute('contenteditable', false);
        </c:if>
    }
</aui:script>

Below is an overview of the main attributes of the <liferay-ui:input-editor /> tag:

Attribute Type Description
autoCreate java.lang.String Whether to show the HTML edit view of the editor initially
contents java.lang.String Sets the initial contents of the editor
contentsLanguageId java.lang.String Sets the language ID for the input editor’s text
cssClass java.lang.String A CSS class for styling the component.
data java.util.Map Data that can be used as the editorConfig
editorName java.lang.String The editor you want to use (alloyeditor, ckeditor, tinymce, simple)
name java.lang.String A name for the input editor. The default value is editor.
onBlurMethod java.lang.String A function to be called when the input editor loses focus.
onChangeMethod java.lang.String A function to be called on a change in the input editor.
onFocusMethod java.lang.String A function to be called when the input editor gets focus.
onInitMethod java.lang.String A function to be called when the input editor initializes.
placeholder java.lang.String Placeholder text to display in the input editor.
showSource java.lang.String Whether to enable editing the HTML source code of the content. The default value is true.

See the taglibdocs for the complete list of supported attributes.

As you can see, it’s easy to include WYSIWYG editors in your portlets!

Related Topics

Adding New Behavior to an Editor

Modifying an Editor’s Configuration

Using the Liferay UI Taglib

0 (0 Votes)
WYSIWYG Editors Previous