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

Question

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.

Answer 1

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