Liferay HTML Editor

In this tutorial, we will see how to integrate Liferay HTML Editor or CK Editor in JSP files in Liferay 6.2 Version.   Liferay provides <liferay-ui:input-editor /> tag  to plugin  HTML editor into JSP.  Input-editor tag provides attributes to customize editor.

Note:   Always use UnicodeFormatter.toString(content) method to set the content to HTML editor. By default Liferay uses CKEditor. we can configure JSP pages to use below  WYSIWYG editors: bbcode, ckeditor, ckeditor_bbcode, ckeditor_creole, fckeditor, simple, tinymce, or tinymce_simple.  Configure the below parameter in file to configure the editor.

editor.wysiwyg.default=ckeditor  // Liferay default HTML editor value
editor.wysiwyg.default=bbcode  // If you want to use bbcode
editor.wysiwyg.default=fckeditor // If you want to use fckeditor


<%@page import="com.liferay.portal.kernel.util.UnicodeFormatter"%>
<%@ taglib uri="" prefix="portlet" %>
<%@ taglib uri="" prefix="aui" %>
<%@ taglib uri="" prefix="liferay-theme" %>
<%@ taglib uri="" prefix="liferay-ui" %>
<portlet:defineObjects />
<portlet:actionURL var="postContent"></portlet:actionURL>

This is Sample HTML Editor </b> portlet in View mode.
<aui:form action="<%=postContent %>">
 <aui:input name="title"></aui:input>
 <liferay-ui:input-editor name="content" initMethod="initEditor" width="100" height="400" 
  resizable="true" ></liferay-ui:input-editor>
 <aui:button type="submit"></aui:button>
 function <portlet:namespace/>initEditor(){
 return  "Sample CKEDITOR";

Portlet Controller:

How to get the HTML editor content at the Controller? As shown in the below code, get the html content by name “content” that provided in input-editor tag. so   processAction method follows as:

 public void processAction(ActionRequest actionRequest, ActionResponse actionResponse) 
    throws IOException, PortletException {
     String content = ParamUtil.getString(actionRequest, "content");
     System.out.println("content is:"+content);

Deploy the portal and add to the page:

HTML Editor

1 Comment

  1. Ravi

    Can we customize the look and feel of liferay ckeditor? Thanks in advance

Comments are closed.