Adding a WYSIWYG Editor to a Portlet

It’s easy to include WYSIWYG editors in your portlet, thanks to the <liferay-editor:editor /> tag.

Below is an example configuration:

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

<div class="alloy-editor-container">
    <liferay-editor: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 uri="http://liferay.com/tld/editor" prefix="liferay-editor" %>

<div class="alloy-editor-container">
    <liferay-editor: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-editor:editor /> tag:

AttributeTypeDescription
autoCreatejava.lang.StringWhether to show the HTML edit view of the editor initially
contentsjava.lang.StringSets the initial contents of the editor
contentsLanguageIdjava.lang.StringSets the language ID for the input editor’s text
cssClassjava.lang.StringA CSS class for styling the component.
datajava.util.MapData that can be used as the editorConfig
editorNamejava.lang.StringThe editor you want to use (alloyeditor, ckeditor, tinymce, simple)
namejava.lang.StringA name for the input editor. The default value is editor.
onBlurMethodjava.lang.StringA function to be called when the input editor loses focus.
onChangeMethodjava.lang.StringA function to be called on a change in the input editor.
onFocusMethodjava.lang.StringA function to be called when the input editor gets focus.
onInitMethodjava.lang.StringA function to be called when the input editor initializes.
placeholderjava.lang.StringPlaceholder text to display in the input editor.
showSourcejava.lang.StringWhether 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!

Adding New Behavior to an Editor

Modifying an Editor’s Configuration

Modifying the AlloyEditor

« Introduction to WYSIWYG EditorsModifying an Editor's Configuration »
Was this article helpful?
0 out of 0 found this helpful