Liferay HTML Editor or CK Editor integration in JSP

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

One thought on “Liferay HTML Editor or CK Editor integration in JSP”

Comments are closed.