logo

Get in touch

Awesome Image Awesome Image

Coding August 11, 2018

How to Modify Existing Smiley Plugin in Liferay 7 CKeditor

Written by Mahipalsinh Rana

20,001

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.

editor.wysiwyg.default=ckeditor
editor.wysiwyg.portal-impl.portlet.ddm.text_html.ftl=ckeditor
editor.wysiwyg.portal-web.docroot.html.portlet.blogs.edit_entry.jsp=ckeditor
editor.wysiwyg.portal-web.docroot.html.portlet.journal.edit_article_content.jsp
=ckeditor

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.
CKEDITOR.config.smiley_images = ['regular_smile.png', 'sad_smile.png','wink_smile.png', 'teeth_smile.png','confused_smile.png', 'tongue_smile.png','embarrassed_smile.png', 'omg_smile.png', 'whatchutalkingabout_smile.png', 'angry_smile.png', 'angel_smile.png', 'shades_smile.png','devil_smile.png', 'cry_smile.png', 'lightbulb.png', 'thumbs_down.png', 'thumbs_up.png', 'heart.png','broken_heart.png', 'kiss.png', 'envelope.png' ];
CKEDITOR.config.smiley_descriptions = [‘smiley’, ‘sad’, ‘wink’, ‘laugh’, ‘frown’, ‘cheeky’, ‘blush’, ‘surprise’, ‘indecision’, ‘angry’, ‘angel’, ‘cool’, ‘devil’, ‘crying’, ‘enlightened’, ‘no’, ‘yes’, ‘heart’, ‘broken heart’, ‘kiss’, ‘mail’ ];
  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.

Bringing Software Development Expertise to Every
Corner of the World

United States

India

Germany

United Kingdom

Canada

Singapore

Australia

New Zealand

Dubai

Qatar

Kuwait

Finland

Brazil

Netherlands

Ireland

Japan

Kenya

South Africa