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 portal-ext.properties 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

view.jsp:

<%@page import="com.liferay.portal.kernel.util.UnicodeFormatter"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<portlet:defineObjects />
<liferay-theme: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>
</aui:form>
<aui:script>
 function <portlet:namespace/>initEditor(){
 return  "Sample CKEDITOR";
 }
</aui:script>

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:

@Override
 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: