Key changes include:
To perform the upgrade of CKEditor in Liferay we need some initial setup:
This is how the default editor in Liferay 6.0.6 looks like:
1 2 3 | <hook> <custom–jsp–dir>/custom_jsp</custom–jsp–dir> </hook> |
1 | <script type=“text/javascript” src=“ckeditor/ckeditor.js”></script> |
that it contains the following code:
1 | <script type=“text/javascript” src=“ckeditor4/ckeditor.js”></script> |
Above line means that from now on (after deployment of the hook) Liferay will be using the new CKEditor.
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’.
1 2 3 4 5 6 7 8 | var defaultTypes = [ [‘Document’,‘Document’], [‘Page’,‘Page’], [‘Attachment’, ‘Attachment’], [‘Audio’, ‘Audio’], [‘Video’, ‘Video’], [‘Image’, ‘Image’] ] ; |
To complete this step we also modify the file srcmainwebappcustom_jsphtmljseditorckeditor4editorfilemanagerbrowserliferaybrowser.html. Find the following line
1 | oConnector.ResourceTypes = [‘Document’, ‘Page’]; |
and change it to:
1 | oConnector.ResourceTypes = [‘Document’, ‘Page’, ‘Image’]; |
Now we can deploy our hook plugin and use new CKEditor in Liferay. Here’s how it will look like after the upgrade:
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.