Use WYSIWUG Editor in our custom Portlet

In this blog we will see how to use WYSIWUG Editor in our custom portlet. So i create a simple portlet and load some default content in editor.You can change the content and click submit and the content will display on Console.






Inside your controller paste this. Here i am using Generic Portlet:-

	package com.test;
	import java.io.IOException;
	import javax.portlet.ActionRequest;
	import javax.portlet.ActionResponse;
	import javax.portlet.GenericPortlet;
	import javax.portlet.PortletException;
	import javax.portlet.PortletRequestDispatcher;
	import javax.portlet.RenderRequest;
	import javax.portlet.RenderResponse;
	import com.liferay.portal.kernel.log.Log;
	import com.liferay.portal.kernel.log.LogFactoryUtil;
	import com.liferay.portal.kernel.util.ParamUtil;
	public class Demo extends GenericPortlet {
	@Override
	public void processAction(ActionRequest request, ActionResponse response)throws PortletException, IOException {
	String content = ParamUtil.getString(request, "content");
	System.out.println("content=>"+content);
	}
	public void doView(RenderRequest renderRequest, RenderResponse renderResponse)throws IOException, PortletException {
	renderRequest.setAttribute("defaultText", "This is Default Text");
	include(viewTemplate, renderRequest, renderResponse);
	}
	protected void include(String path, RenderRequest renderRequest,RenderResponse renderResponse) throws IOException, PortletException {
	PortletRequestDispatcher portletRequestDispatcher = getPortletContext().getRequestDispatcher(path);
	if (portletRequestDispatcher == null) {
	_log.error(path + " is not a valid include");
	}
	else {
	portletRequestDispatcher.include(renderRequest, renderResponse);
	}
	}
	public void init() {
	viewTemplate = getInitParameter("view-template");
	}
	protected String viewTemplate;
	private static Log _log = LogFactoryUtil.getLog(Hellotest.class);
	}

view raw Demo.java hosted with ❤ by GitHub

Explanation:-
1)Inside doView i just set a attribute with name defaultText. We will fetch this on view.jsp.
2)processAction method display the text when we submit the form.

Now open view.jsp and paste this:-

	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
	<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
	<portlet:defineObjects />
	<%
	String defaultText = (String)request.getAttribute("defaultText");
	%>
	<!-- Action URLs -->
	<portlet:actionURL var="submitContentURL" />
	<form action="<%=submitContentURL%>" method="POST">
	Enter your Content :-
	<br>
	<liferay-ui:input-editor name="content" initMethod="initEditor" width="100" height="400" resizable="true" toolbarSet="liferay-article"></liferay-ui:input-editor>
	<input type="submit" value="SUBMIT">
	</form>
	<aui:script>
	function <portlet:namespace/>initEditor(){
	var contentValue='<%=defaultText%>';
	return contentValue ;
	}
	</aui:script>

view raw view.jsp hosted with ❤ by GitHub

Explanation:-
1)Here i fetch the value of defaultText which we set in our controller and put in inputEditor by using initEditor().
2)We create a simple form which just print the content data on console when we click the submit button.

Hope this will Help....

Related Post:-

Basic web content in Liferay

Categorization in web content

Fetch Web Contents Programmatically

Get Journal Article Fields Programmatically

Embedding a Portlet in Web Content

Creating tabs using Web Content

Embedding a Web Content/Journal Article in a Portlet

Use of Structure in Custom Portlet