Bringing Inline Editing capabilities into Liferay Portal 6.1 and 6.0
General Blogs August 23, 2013 By Jonas Yuan
Inline editing is a quick way to update content by making changes directly. CKEditor 4 (http://ckeditor.com) comes in the form of Inline Editing, an HTML5 feature that allows users to edit pages directly in their final state. Inline editing gives us a perfect idea of how the content will look without using impractical “preview” functions.
Involved content included, but not limited, Web Content articles, Blogs entries, Wiki pages, Message Boards messages, ForgeCart products (http://demo.forgelife.com), Knowledge base articles, etc. This article will address how to bring inline editing capabilities (CKEditor 4) into Liferay portal 6.1 (GA1, GA2 and GA3).
CKEditor 4 in portal 6.1 GA2, advanced editing mode
Inline editing mode for web content
Icons: Source, Save, Cancel, Edit, etc.
- Save: save current changes;
- Cancel: cancel current changes;
- Edit: go to advanced editing mode.
- Source: view / update content via source
Inline editing mode for blogs entries
Inline editing mode for Wiki pages
Inline editing mode for Message Boards messages
Enable / disable inline editing via " Edit Controls"
- Enabled inline editing when "Edit Controls" was checked;
- disabled inline editing when "Edit Controls was unchecked.
The following is summary of inline editing feature implementation.
- First, add attributes in UI tag : InputEditorTag.java
_inlineEdit = false;
_inlineEditSaveURL = null;
_inlineEditContentURL = null;
- And then, add attributes in UI tag: liferay-ui.tld
- Finally, add CKeditor 4 (latest version) as a hook
Inline editing is nice feature for Web Content articles, Blogs entries, Wiki pages, Message Boards messages, ForgeCart products , Knowledge base articles, etc. The hook (forgecart-ckeditor-hook) was designed for both Liferay portal 6.1 and 6.0. The WAR (forgecart-ckeditor-hook) is avaliable on demand.