Blogs

Bringing Inline Editing capabilities into Liferay Portal 6.1 and 6.0

Jonas Yuan

August 23, 2013

A Minute Read

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

<name>inlineEdit</name>

<required>false</required>

</attribute>

<name>inlineEditSaveURL</name>

<required>false</required>

</attribute>

<name>inlineEditContentURL</name>

<required>false</required>

</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.