javasap-commerce-cloudzkbackofficezk-grid

How to add Emoji plugin to CKEditor used in ZK framework?

I have a requirement where my ZK wysiwyg toolbar needs to provide an option of adding an Emoji.

I checked and found that there is a Emoji plugin already shipped with CKEditor but I am unable to enable it on ZK editor.

I already tried to add below in to configuration file, but it doesn't work.

config.toolbar_EmojiOnly = [
    ['emoji']
];

Can anyone please help?

Please note - I don't want to use Smiley plugin. I want to use Emoji plugin.

Solution

  • There is three things to do to add plugins CKEditor for a ZK application. 1: download all of the plugin files, including the dependencies for the plugin that you are trying to install. For the emoji plugin, you will need at least the following plugins:

    - ajax
- autocomplete
- emoji
- floatpanel
- panelbutton
- textmatch
- textwatcher
- xml

    You can download these from the official CKEditor website

    2: deploy your plugins into the proper folder ZK's CKEditor plugins are located under [classpath]/web/js/ckez/ext/CKeditor/plugins A standard deployment would be at [application root]/src/main/resources/web/js/ckez/ext/CKeditor/plugins Your deployment should look like: 

    - [root]/src/main/resources/web/js/ckez/ext/CKeditor/plugins/ajax/plugin.js
- [root]/src/main/resources/web/js/ckez/ext/CKeditor/plugins/emoji/plugin.js
- [root]/src/main/resources/web/js/ckez/ext/CKeditor/plugins/emoji/assets/...
etc.

    3: actually adding the plugin to your ckeditor instance. The standard way would be to use a custom config file such as:

    CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = 'emoji';
};

    and you would declare your config such as:

    <ckeditor customConfigurationsPath="/path/to/config.js"/>