Add HTML Editor to Portlet

(Redirected from How to add a wysiwyg html editor to a portlet)

Security Precaution #

Allowing users to embed HTML on your site is risky! XSS and Phishing attacks become possible, so it is important that any HTML permissions are only given to trusted users.

Introduction #

If you are building a portlet that takes in user input, you may be interested in adding a WYSIWYG HTML editor to your portlet. Using the portal's existing tags, it doesnt take much to add this. Here are the steps to take:

Getting access to the Portals Tags in your JSP#

You must add these lines to your JSP before you can start using the Portal's tags

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>

<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

Adding the Editor#

We will be adding two lines of code. The first line will add the actual WYSIWYG editor. The second line of code is a hidden input field which will store the actual html code of the wysiwyg content. You may or may not need the second line depending on how you are using this WYSIWYG editor. If you need the value of the WYSIWYG editor to be submitted with a form, then you will need this line. However, if you are just using javascript to parse the value (and perhaps sending it via ajax), then you will not need this hidden field.

<liferay-ui:input-editor />

<input name="<portlet:namespace />htmlCodeFromEditorPlacedHere" type="hidden" value="" />

Adding Javascript#

By default, the editor will call "initEditor()" to try and pre-populate the body of the editor. In this example, when the editor loads, it will have the value of "scott was here" in bold.

The second method is used to pull out the html code from the editor. One common way to use this method is to attach it to your "save/submit" button so that the value in the wysiwyg editor will be copied into the hidden input field just before the form is submitted.

<script type="text/javascript">
            function <portlet:namespace />initEditor() {
                        return '<font style="font-weight: bold">scott was here</font>';
            }

            function <portlet:namespace />extractCodeFromEditor() {
                        var x = document.<portlet:namespace />fm.<portlet:namespace />htmlCodeFromEditorPlacedHere.value = window.<portlet:namespace />editor.getHTML();
 
                        alert(x);
            }
</script>
0 Attachments
122914 Views
Average (5 Votes)
The average rating is 3.6 stars out of 5.
Comments
Threaded Replies Author Date
Hi i have followed above lines of code in my... Suhail Ahmed December 3, 2008 3:27 AM
This was cool.. thanks Kelly C March 31, 2010 3:34 PM
Hi, I'm having a research about strut... Tam Nguyen Minh November 30, 2010 8:04 PM
Hi, Good Wiki, But I want to add one thing... Mati-ur-Rehman Khan December 29, 2010 6:31 AM
Hi Mati Khan, I'm using Liferay 6.0 bundle... phuoc nguyen January 17, 2011 8:48 AM
Hi, I'm also using Liferay 6.0 bundle with... Man M April 11, 2011 5:33 AM
Hi, I've found my problem. The solution is:... Man M April 12, 2011 9:01 AM
For More on Liferay UI check this out ... Rohit Salecha May 19, 2011 5:29 AM
How i can received text and image from this... Nguyen Le May 27, 2012 1:47 AM

Hi


i have followed above lines of code in my liferay4.4.2, it's throwing javascript error that

"textarea.value = parent.initEditor()"

is not defined

waiting for your reply


thanks in advance
Posted on 12/3/08 3:27 AM.
This was cool.. thanks
Posted on 3/31/10 3:34 PM.
Hi,
I'm having a research about strut portlet, so i use beans to communicate with database. But i have a problem when insert text from fck into database. What should i do if i want to integrate a bean into fck ?
Thanks
Posted on 11/30/10 8:04 PM.
Hi,

Good Wiki, But I want to add one thing more to it.

For getting value from editor using

window.<portlet:namespace />editor.getHTML();

doesn't work all the time.

My scenario was, in AUI.Dialog I wanted to show Editor, then read value, and afterwards post it using Ajax post. So First time it works well.
But second time when i try to get value it says "editor.getHTML function not exists".
So way around was using
document.getElementById('<portlet:namespace/>editor').contentWindow.getHTML();

Ho­pe it helps someone.

Anyways thanks Liferay for a nice editor approach.

Cheers emoticon
Posted on 12/29/10 6:31 AM.
Hi Mati Khan,

I'm using Liferay 6.0 bundle Tomcat. I follow this instruction but I can't get the content of CKEditor. Could you please kindly tell me how to do?

Thanks and best regards,
Posted on 1/17/11 8:48 AM in reply to Mati Khan.
Hi,
I'm also using Liferay 6.0 bundle with Tomcat and I have the same problem as phuoc nguyen. I can't get the content of the editor.
I've tried it as explained above, but it doesn't work.

My Code:
<form method="post" action="<%=send_email%>" enctype="multipart/form-data" name="<portlet:namespace />fm" >
<liferay-ui:input-editor />
<input name="<portlet:namespace />htmlCodeFromEditorPlacedHere" type="hidden" value="" />

<script type="text/javascript">
function <portlet:namespace />initEditor() {
return '<font style="font-weight: bold">scott was here</font>';
}
function <portlet:namespace />extractCodeFromEditor() {
var x = document.<portlet:namespace />fm.<portlet:namespace />htmlCodeFromEditorPlacedHere.value = window.<portlet:namespace />editor.getHTML();

alert(x);
}
</script>


<input type="submit" onclick="extractCodeFromEditor()"
value="<liferay-ui:message key="send" />">

In my java ActionClass I want to read the content by using:
String getHiddenValue = ParamUtil.getString(
actionRequest, "htmlCodeFromEditorPlacedHere");
But the String getHiddenValue is always empty.

I also tried it with:
<input type="button" onclick="extractCodeFromEditor()"
value="<liferay-ui:message key="send" />">
and:
function <portlet:namespace />extractCodeFromEditor() {
var x = document.<portlet:namespace />fm.<portlet:namespace />htmlCodeFromEditorPlacedHere.value = window.<portlet:namespace />editor.getHTML();
alert(x);
submitForm(document.<portlet:namespace />fm);
}
In this case when I click on the button nothing happens. I think submitForm is not called

Using document.getElementById('<portlet:namespace/>editor').contentWindow.getHTML();
do­es also not work.

Does anyone know what I did wrong? And how I can solve my problem.
thanks in advance!
Posted on 4/11/11 5:33 AM in reply to phuoc nguyen.
Hi,
I've found my problem.
The solution is:
Because I'm using enctype="multipart/form-data" in my form-tag, I can't use actionRequest,
I have to use UploadPortletRequest req = PortalUtil .getUploadPortletRequest(actionRequest);
With String body = ParamUtil.getString(req, "content"); I can use the content in my java Action Class.

The JavaScript Method should be called in the onsubmit of the form-tag and the <portlet:namespace /> is important.
<form method="post" action="<%=send_email%>" enctype="multipart/form-data" onsubmit="<portlet:namespace />extractCodeFromEditor()" name="<portlet:namespace />fm" >

Best Regards.
Posted on 4/12/11 9:01 AM in reply to Manuel M.
For More on Liferay UI check this out

http://liferaydemystified.blogspot.com/2011/05/liferay-ui-tabs.html
Posted on 5/19/11 5:29 AM in reply to Man M.
How i can received text and image from this editor, please help me
Posted on 5/27/12 1:47 AM in reply to Rohit Salecha.