« Back

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
 

 

Features

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.
 
 

Implementation

 
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
<attribute>
<name>inlineEdit</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
 
<attribute>
<name>inlineEditSaveURL</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
 
<attribute>
<name>inlineEditContentURL</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
  • Finally, add CKeditor 4 (latest version) as a hook

 

Summary

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.