CK editor in Liferay 6.0

Hi Friends,
In this article I just want to share how to use CK editor in liferay 6.0 .

Follow these 4 simple steps.

Step 1.Add below line on your page
<liferay-ui:input-editor width="80%" />.


Step 2.Create hidden variable to set the value of CK editor like below
<aui:input name="content" type="hidden" />


Step 3.Add javascript init method like this

<aui:script>

function <portlet:namespace />initEditor() {

return "<%= UnicodeFormatter.toString(content) %>";

}

</aui:script>


Step 4:On submiting form we can assign CK editor value like this

function <portlet:namespace />saveEntry() {

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

document.<portlet:namespace />fm.<portlet:namespace />content.value = message;

submitForm(document.<portlet:namespace />fm);

}


Currently we are having problem in liferay 6.0 is that when we refresh CK editor page , it gives JS error.

For that fix is like this get html/js/editor/ckeditor.jsp in function initCkArea() comment line 52 and 53 which starts with CKEDITOR.config.toolbar and CKEDITOR.config.customConfig respectively and add below line

ckEditor.setData(parent.<%= HtmlUtil.escape(initMethod) %>());
In the same file comment line number 131 i.e

initCkArea(); and add
if (parent.AUI) {

parent.AUI().on('domready', initCkArea);

}
In side CKEDITOR.replace method at line number 123 in same file comment line starts with filebrowserBrowseUrl , filebrowserUploadUrl and
add below code

customConfig: '<%= PortalUtil.getPathContext() %>/html/js/editor/ckeditor/ckconfig.jsp?p_l_id=<%= plid %>&p_p_id=<%= HttpUtil.encodeURL(portletId) %>&p_main_path=<%= HttpUtil.encodeURL(mainPath) %>&doAsUserId=<%= HttpUtil.encodeURL(doAsUserId) %>&cssPath=<%= HttpUtil.encodeURL(cssPath) %>&cssClasses=<%= HttpUtil.encodeURL(cssClasses) %>',
filebrowserBrowseUrl: '<%= PortalUtil.getPathContext() %>/html/js/editor/ckeditor/editor/filemanager/browser/liferay/browser.html?Connector=<%= connectorURL %>',
filebrowserUploadUrl: null,
toolbar: '<%= TextFormatter.format(HtmlUtil.escape(toolbarSet), TextFormatter.M) %>'


Finally add required import i.e
<%@ page import="com.liferay.portal.util.PortalUtil" %> and one extra variable


String portletId = ParamUtil.getString(request, "p_p_id");