Liferay 6.0.6 is (by default) bundled with versionĀ 3.2 of CKEeditor (open source WYSIWYG editor, more info onĀ ckeditor.com). It is used within Liferay for content creation / editing.Ā The current, stable version of CKEditorĀ (as of this writing) is 4.4.7. As you can assume, you may be missing some of the nice features that were introduced between those two versions.

Key changes include:

  • Since CKEditor 4.0 Moono skin is default – fits most use-cases by default.
  • Many plugins are available since CKEditor 4.0.
  • We canĀ also create customised version of CKEditor using CKBuilderĀ service.

CKEditor upgrade in Liferay – pre-requisities

To perform the upgrade of CKEditor in Liferay we need some initial setup:

  • CKEditor full version 4.4.7 (download fromĀ cksource.com)
  • Java: jdk1.6.0_37 + jre1.6.0_37
  • Liferay 6.0.6 with bundled Tomcat 6.0.29 (Liferay Portal Community Edition 6.0.6 CE (Bunyan / Build 6006 / February 17, 2011) download from sourceforge.net) Ā installed at %LIFERAY_HOME% with default settings (HSQL Database, port 8080)
  • Liferay 6.2.3 (required if you want to also upgrade the filemanager) download fromĀ sourceforge.net

This is how the default editor in Liferay 6.0.6 looks like:

old_ckeditor

CKEditor upgrade in Liferay – 4 steps to success

  1. First of all we need to create a Liferay Hook. I prefer to use Maven, so I generate hook from archetype.
  2. After we create the hook, we need to add the following lines inĀ src/main/webapp/WEB-INF/liferay-hook.xml (create the file if it’s not there):

  3. Next, extract the contents of ckeditor zip file to src/main/webbapp/custom_jsp/html/js/editor and change the folder name fromĀ ckeditor to ckeditor4.
  4. Copy the file %LIFERAY_HOME%/liferay-portal-6.0.6/tomcat-6.0.29/webapps/ROOT/html/js/editor/ckeditor.jsp to src/main/webapp/custom_jsp/html/js/editor and modify the line:

    that it contains the following code:

    AboveĀ line meansĀ that from now onĀ (after deployment of the hook)Ā Liferay will be using the new CKEditor.

CKEditor – upgrading the filemanager

After upgrade of the CKEditor, the old filemanagerĀ (which is used to browseĀ images and other files) may not work. So we also need to upgrade the filemanager in CKEditor.

We do this by copying filemanager from Liferay 6.2 located at liferay-portal-6.2-ce-ga4tomcat-7.0.42webappsROOThtmljseditorckeditoreditorĀ to srcmainwebappcustom_jsphtmljseditorckeditor4editor.

If we want to use this filemanager to browse images, we also need to add a little fix.

In srcmainwebappcustom_jsphtmljseditorckeditor4editorfilemanagerbrowserliferayfrmresourcetype.html we need toĀ add a new typeĀ of content – ā€˜Image’.

To complete this step we also modify theĀ fileĀ srcmainwebappcustom_jsphtmljseditorckeditor4editorfilemanagerbrowserliferaybrowser.html. Find the following line

and change it to:

Now we can deploy our hook plugin and use new CKEditor in Liferay. Here’s how it will look like after the upgrade:

new_ckeditor

Summary (and Github sources link)

Hopefully, after performing all the steps listed above you are now a happy owner of a Liferay 6.0.6 installation integrated with the latest version of the CKEditor. To ease the process of installation I’ve put the sources of the hook implemented according to the above instructions on Github – you can find themĀ here. Hope they will be helpfull (if anything goes wrong, drop me a line). Lookout for my next post, where I will review other content editorsĀ bundled with Liferay.

Share