How to Modify Existing Smiley Plugin in Liferay 7 CKeditor

Prerequisite to Mondify Smiely Plugin in Liferay 7 Ckeditor:

As we know, Liferay 7 provides different WYSIWYG editors the portal. In this article we will modify the CKEditor plugins configurations. By default, on Liferay 7 fresh setup AlloyEditor is available in portal. We can change to CKEditor by setting following properties in porta-exp.properties file for different portlets.

I have set CKEditor for DDL, Blogs and Web Content Articles.

Modify existing CKEditor plugin configurations:

We can also modify the configuration of the existing plugins by creating module with help of Liferay Document modifying an editor’s configuration.

Here, we will modify configuration of Smiley Plugin. We will remove some smiles.

1. Create module to modify plugin configuration for CKEditor. The steps has been explained in the Liferay Document modifying an editor’s configuration.
   a. In the steps in document, replace editor.name to ckeditor as we will configure plugin for CKEditor.
2. Now, as the smiley plugin already available in CKEditor in Liferay, we get following set of smileys with smiley descriptions which displays in tooltip. You can find this default configuration in smiley plugin.

1. Now, in populateConfigJSONObject method, we can have smiley_images and smiley_descriptions JSONs which we can modify as per our requirement.
   JSONArray smiley_images = null;
if (jsonObject.has("smiley_images")) {
smiley_images = jsonObject.getJSONArray("smiley_images");
} else {
smiley_images = JSONFactoryUtil.createJSONArray();
}
   smiley_images.put(“regular_smile.png”);
   smiley_images.put(“sad_smile.png”);
   smiley_images.put(“wink_smile.png”);
   smiley_images.put(“teeth_smile.png”);
   smiley_images.put(“confused_smile.png”);
   smiley_images.put(“tongue_smile.png”);
   smiley_images.put(“embarrassed_smile.png”);
   smiley_images.put(“omg_smile.png”);
   smiley_images.put(“whatchutalkingabout_smile.png”);
   smiley_images.put(“angry_smile.png”);
   smiley_images.put(“angel_smile.png”);
   smiley_images.put(“shades_smile.png”);
   smiley_images.put(“cry_smile.png”);
   smiley_images.put(“lightbulb.png”);
   smiley_images.put(“thumbs_down.png”);
   smiley_images.put(“thumbs_up.png”);
   smiley_images.put(“envelope.png”);
   jsonObject.put(“smiley_images”, smiley_images);
   JSONArray smiley_descriptions = null;
   if (jsonObject.has(“smiley_descriptions”)) {
   smiley_descriptions = jsonObject.getJSONArray(“smiley_descriptions”);
   } else {
   smiley_descriptions = JSONFactoryUtil.createJSONArray();
   }
   smiley_descriptions.put(“smiley”);
   smiley_descriptions.put(“sad”);
   smiley_descriptions.put(“wink”);
   smiley_descriptions.put(“laugh”);
   smiley_descriptions.put(“frown”);
   smiley_descriptions.put(“cheeky”);
   smiley_descriptions.put(“blush”);
   smiley_descriptions.put(“surprise”);
   smiley_descriptions.put(“indecision”);
   smiley_descriptions.put(“angry”);
   smiley_descriptions.put(“angel”);
   smiley_descriptions.put(“cool”);
   smiley_descriptions.put(“crying”);
   smiley_descriptions.put(“enlightened”);
   smiley_descriptions.put(“no”);
   smiley_descriptions.put(“yes”);
   smiley_descriptions.put(“mail”);
   jsonObject.put(“smiley_descriptions”, smiley_descriptions);

   Here, I have removed angry, heart, kiss and broken heart smiles from the JSON.

2. Done, After deploying this module in portal, only included smiles in JSON will be available.

INEXTURE known as leading Liferay consulting services provider in India, deliver the best in class solutions that improve the effectiveness and efficiency of the product. Our highly experienced team provides crucial process backbone and framework for every product and this will enable instant and collaborative application development.