Using fckeditor in Liferay portlet

Liferay already integrates a few HTML editors in the portal, for example tinymce and fckeditor, so if you want to use it, you don’t need to copy the javascript and library into your development environment.

Here are the steps of how you can use fckeditor in your portlet :
1. Create the form, and include the editor in the form
2. Create the javascript.
3. Include jsp file that contains initialization and variable declarations

Ok let’s go to the details
1. Create the form, and include the editor in the form

<form name="
<portlet:namespace />fm" method="post"
enctype="multipart/form-data" onsubmit="getHtmlValue();" >

<!– your other form fields –>

<!– now comes our editor –>
editor" name="
<portlet:namespace />editor" scrolling="no" src='<%=themeDisplay.getPathJavaScript()%>/editor/editor.jsp?p_l_id=<%=plid%>&editorImpl=<%="fckeditor"%>' width="100%"></iframe>

<input name="content" type="hidden" value="" >

<!– your other form fields –>
</form>

Explanation :
plid is build in variable , so you don’t need to declare it.
You can change the value of editorImpl to other editor if you want to use other editor, for example tinymce .
You need the hidden field content to store the entire content of the editor, and later you receive it as a request parameter.

2. Prepare the javascript

<script type="text/javascript">
    function initEditor() {
        return "<%= UnicodeFormatter.toString(content) %>";
    }

    function getHtmlValue() {
        var html = parent.
<portlet:namespace />editor.getHTML();
        document.
<portlet:namespace />fm.content.value = html;
	}

    function
<portlet:namespace />SaveButton() {
<portlet:namespace />fm.action="your_action_class";
    }
</script> 

Explanation :
You see the line that contains UnicodeFormatter.toString(content) , content is jsp variable that you declare yourself. This is used if you want the editor preloaded with some content
SaveButton() is javascript method that is being called when your submit button is clicked.

3. Include jsp file that contains initialization and variable declarations

<%@ include file="/html/portlet/init.jsp" %>

Updated

How if I want to have two inputs using fckeditor ?

Well, you can just add another 1 pair of  iframe with fckeditor, and another hidden input field. Let’s say the name of iframe with editor is consultanteditor. So in the init method, you add another method to initialize this editor like this :


    function initConsultantEditor(){
        return "<%= UnicodeFormatter.toString(consultantContent) %>";
    }

consultantContent is jsp page variable, where the value may comes from request attribute.

Done. Applied to Liferay 4.3.3

16 comments so far

  1. Laxmi on

    I am getting error as
    plid can not be resolved

  2. portaldevelopment on

    Hi Laxmi,

    In your JSP, add an include like this :

    <%@ include file="/html/portlet/init.jsp" %>
    
  3. Laxmi on

    I have included file still i am not getting fck editor.Can you please help me?jsp file is as follows.

    function initEditor() {
    return “”;
    }

    function getHtmlValue() {
    var html = parent.
    editor.getHTML();
    document.
    fm.content.value = html;
    }

    function
    SaveButton() {
    fm.action=”..\WEB-INF\classes\com\vb\ypeer\portlet”;
    }

    OrderDashBoard

    <form name=”
    fm” method=”post”
    enctype=”multipart/form-data” onsubmit=”getHtmlValue();” >

    <iframe frameborder=”0″ height=”200″ id=”
    editor” name=”
    editor” scrolling=”no” src=’/editor/editor.jsp?p_l_id=&editorImpl=’ width=”100%”>

  4. portaldevelopment on

    Did you use ext environment to develop your portlet ? Or you develop portlet independent of Liferay ? This tutorial only works if you develop portlet using Liferay’s ext environment.

  5. Laxmi on

    I am developing portlet using Liferay’s Ext Environment.

    fm.action=”..\WEB-INF\classes\com\vb\ypeer\portlet”;

    This is where i have my portlet class file.

  6. senorluca on

    Can I include two input-editor in my jsp?
    How can init the textbox?

    • portaldevelopment on

      Hi senorluca,

      I’ve updated the article, to explain on how to use more than 1 fckeditor. Hope it helps.

  7. Waldemar Kunz on

    Hello Christianto,

    thank you for your great article. I have a little trouble with more then 1 FCK-Editor on one page.

    I have 2 iframe’s (… name=”subscribe” … and … name=”unsubscribe” …) and two init-Functions: function initEditor() { … } and function initUnsubscribeEditor() { … }
    But only first init-Function ( function initEditor() { … }) will be started.

    Do you know, what the problem is? Thank you in advance.

    • Waldemar Kunz on

      OK, I’ve found a decision…

      • Karthik on

        Hello Waldemar Kunz,

        I have the same problem, how did you solve that please help me…

  8. masterabil on

    Good info…
    Currently, I use liferay 5.1.1 and make a modification on journal content entry’s form. I use fckeditor for title & description field and working successfully. But anyone know how to retrieve back the data without including other tag like , etc… What I mean, its should display a title in a bold style not “Title.. Need your help guys…

  9. masterabil on

    Good info…
    Currently, I use liferay 5.1.1 and make a modification on journal content entry’s form. I use fckeditor for title & description field and working successfully. But anyone know how to retrieve back the data without including other tag like , etc… What I mean, its should display a title in a bold style not “Title“.. Need your help guys…

  10. masterabil on

    Good info…
    Currently, I use liferay 5.1.1 and make a modification on journal content entry’s form. I use fckeditor for title & description field and working successfully. But anyone know how to retrieve back the data without including other tag like , etc… What I mean, its should display a title in a bold style not [b]Title[b].. Need your help guys…

  11. Salaye on

    Just in case somebody is having problems sending the form with this method, this is how I fixed it:

    1. In the SaveButton() function put:
    document.fm.action=”your_action_class”;

    instead of:
    fm.action=”your_action_class”;

    2. Then, in the form:
    <input name="saveButton" type="submit" value="Send" onClick="SaveButton();”>

    • Salaye on

      Sorry, there is some problem putting tags in the comments:

      document.<portlet:namespace />fm.action=”your_action_class”;
       instead of
      < portlet:namespace /> fm.action=”your_action_class”;

  12. Rabel on

    Hi!!
    I have some problem retrieving data from action, when I try to edit an article, if that article have ‘%’, i’ll not be able to see the content in the editor.
    Some one can help me?
    thanks!!!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: