Wednesday 6 June 2012

How to get the values from Input Editor

How to get the values from <liferay-ui:input-editor>

Step 1 : you have to import liferay-ui tag library

Step 2 : provide FCKeditor tag.
         ex : <liferay-ui : input-editor />
         Note : below of the tag you have to add one more hidden field like (this is mandatory):
                <liferay-ui : input-editor />
                <input name="<portlet:namespace />htmlCodeFromEditorPlacedHere" type="hidden" value="" />

Step 3 : add these tags related javascript also . Below you can find the script :

    <script type="text/javascript">
            function <portlet:namespace />initEditor() {
                //if you dont wnat the default text you can remove.       
        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();
            }
    </script>

Step 4 : Needs to call javascript function when we are submitting the form.

    Ex :
    <form action="<%=employeeActionURL.toString()%>" method="post"
        onsubmit="<portlet:namespace />extractCodeFromEditor()"
        name="<portlet:namespace />fm">

        <table>
            <tr>
                <td>Name</td>
                <td><input type="text" name="empName" /></td>
            </tr>
            <tr>
                <td>Department</td>
                <td><input type="text" name="empDepartment" /></td>
            </tr>
            <tr>
                <td>Location</td>
                <td><input type="text" name="empLocation" /></td>
            </tr>
            <tr>   
                <td>Editor</td>
                <td><liferay-ui:input-editor /> <input
                    name="<portlet:namespace />htmlCodeFromEditorPlacedHere"
                    type="hidden" value="" /></td>
            </tr>
            <tr>
                <td><input type="submit" value="Submit" /></td>
                <td></td>
            </tr>
        </table>
    </form>

Step 5 : Below code you have to write in your action class to store the data into DB.
   
    String editor = actionRequest.getParameter("htmlCodeFromEditorPlacedHere");
    RecentEmployee recentEmployee = new RecentEmployeeImpl();
    recentEmployee.setContent(editor);
    RecentEmployeeLocalServiceUtil.addRecentEmployee(recentEmployee);


Step 6 : ALERT : When you are getting information in class level and setting into the respective attribute (Database column). You have to verify that the column size should be big othewise you will experienced with exception.
In my case I update the column size as VARCHAR(10000).


I hope it will be working fine for your requirement.

No comments:

Post a Comment