AppSuite:Emoji

API status: In Development

Emoji Configuration

Abstract. In this article, the support for emoji is described in detail. Learn about how different icon sets can be included and configured.

Config paths

Configuration will be served via jslob service at the following path.

io.ox/mail//emoji

The object can contain these keys (default values in brackets):

io.ox/mail//emoji/defaultCollection ('unified')
io.ox/mail//emoji/availableCollections ('unified')
io.ox/mail//emoji/forceEmojiIcons (false)
io.ox/mail//emoji/collectionControl ('none') // possible: 'none', 'tabs', 'dropdown'
io.ox/mail//emoji/autoClose (false)

io.ox/mail//emoji/recently ({})
io.ox/mail//emoji/userCollection (emoji/defaultCollection)

How to add a new icon set

It is possible to add new icon sets by writing a core plugin. It is recommended, to install the files to

apps/3rd.party/emoji/<iconSetName>/

Put all your CSS code and images into this directory and create a register.js adding the CSS/LESS files as dependencies.

Once this is done, you need to add the CSS also to the tinyMCE editor, because an iframe is used to edit the text and in order to have full emoji support, you need to load the CSS code there as well. Doing so is really easy. There is an extension point you can use to add the paths to your CSS files.

define('3rd.party/emoji/greatestIconSet/register',
   [
    'io.ox/core/extensions',
    'css!3rd.party/emoji/greatestIconSet/emoji.css',
    'css!3rd.party/emoji/greatestIconSet/emoji_categories.css'
], function (ext) {
    "use strict";

    ext.point('3rd.party/emoji/editor_css').extend({
        id: 'greatestIconSet/categories',
        css: '3rd.party/emoji/greatestIconSet/emoji_categories.css'
    });
    ext.point('3rd.party/emoji/editor_css').extend({
        id: 'greatestIconSet/icons',
        css: '3rd.party/emoji/greatestIconSet/emoji.css'
    });

});