Adding a WYSIWYG Editor to a Portlet

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

  1. Add the liferay-editor taglib declaration to your portlet’s JSP:

    <%@ taglib uri="http://liferay.com/tld/editor" prefix="liferay-editor" %>
    
  2. Add the editor to your JSP with the <liferay-editor:editor /> tag. Configure it using the attributes shown in the table below:

    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.

    Below is an example configuration:

    <div class="alloy-editor-container">
        <liferay-editor:editor
        		contents="Default Content"
        		cssClass="my-alloy-editor"
        		editorName="alloyeditor"
        		name="myAlloyEditor"
        		placeholder="description"
        		showSource="true" 
        /> 
    </div>
    
  3. Optionally 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>
    

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

« Introduction to WYSIWYG EditorsModifying an Editor's Configuration »
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0