How to modify existing Smiley plugin in Liferay 7 CKeditor

Liferay-7-CKeditor-hero

Prerequisite:

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’ ];
  3. 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.

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

Written By Bhavika Soni – Associate Consultant at INEXTURE Solutions LLP

Comments (2)

Hello,
Thank you for above tutorial. I will surely try to implement the same in coming days. However, I was trying to modify ckeditor in Liferay 7 by adding a button which allows the user to add video functionality. To do the same, I enabled Xuggler plugin, and the video button was seen in the editor and it worked properly. However, it did not allowed user to adjust alignment of the video. Thus, is it possible to write the code of our own custom plugin which supports video functionality and the same can be added to the Liferay 7 ckeditor as a button?
Please help.

INEXTURE Solutions LLP

Hi Taruchit Goyal,
Related to your question, Yes you can write the custom plugin for ckeditor 4 for the alignment and integrate the same in liferay 7, but it would be too much of extra efforts. Rather you can try to find some ckeditor 4 plugins like plugin which gives the ability to align the video. You can quickly check this with the basic integration of the ckeditor plugin in Liferay.

Do let us know if the above answer worked for you?

URL Link: https://ckeditor.com/cke4/addon/html5video

Leave a comment