|
|
| (6 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| <div class="title">Emoji Support</div>
| | The content on this page has moved to https://documentation.open-xchange.com/latest/ui/miscellaneous/emoji.html |
|
| |
|
| '''Abstract.''' In this article, the support for emoji is described in detail. Learn about how different icon sets can be included and configured.
| | Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition. |
| __TOC__
| |
| == Enabling emoji support ==
| |
| Emoji support is disabled by default. In order to enable the feature, you must define the capability '''emoji'''. This is done by just adding the word "emoji" to the property "permissions" in '''/opt/openexchange/etc/permission.properties''':
| |
| | |
| <pre>
| |
| permissions=...,emoji
| |
| </pre>
| |
| | |
| == Settings ==
| |
| Configuration will be served via [[AppSuite:jslob|jslob]] service at the following path.
| |
| <pre>
| |
| io.ox/mail/emoji
| |
| </pre>
| |
| | |
| The following settings are relevant for emoji support:
| |
| <pre>
| |
| io.ox/mail/emoji//defaultCollection=unified
| |
| io.ox/mail/emoji//availableCollections=unified,two,three
| |
| io.ox/mail/emoji//forceEmojiIcons=false
| |
| io.ox/mail/emoji//collectionControl=none # possible values 'none', 'tabs', 'dropdown'
| |
| io.ox/mail/emoji//autoClose=false
| |
| io.ox/mail/emoji//userCollection=emoji/defaultCollection
| |
| io.ox/mail/emoji//overrideUserCollection=false
| |
| io.ox/mail/emoji//sendEncoding=unified # possible values 'unified', 'pua'
| |
| </pre>
| |
| | |
| In order to configure this server-side, just append to existing appsuite.properties or create a new file emoji.properties (in same directory; please mind the double-slash, this in not a typo! plus: changing such settings requires a backend restart).
| |
| | |
| {|
| |
| |-
| |
| ! Setting !! Description
| |
| |-
| |
| | defaultCollection || Default collection.
| |
| |-
| |
| | availableCollections || Available collections. Comma separated.
| |
| |-
| |
| | forceEmojiIcons || -
| |
| |-
| |
| | collectionControl || none, dropdown, tabs.
| |
| |-
| |
| | autoClose || Emoji pallet closes when user click or presses any key inside editor
| |
| |-
| |
| | userCollection || Current user collection
| |
| |-
| |
| | overrideUserCollection
| |
| ||Set this setting to true and the current user collection will not be prefered when replacing unicode characters with an image. Since Mail compose works with a current collection object, this setting has no effect when inserting icons from the editor plugin into the text. But when rendering any text with unicode characters, this setting will have an effect on the icon that is shown.
| |
| |}
| |
| | |
| == How to add a new icon set ==
| |
| | |
| It is possible to add new icon sets by [[Appsuite:Writing_a_simple_application|writing a core plugin]]. It is recommended, to install the files to
| |
| | |
| <pre>
| |
| apps/3rd.party/emoji/<iconSetName>/
| |
| </pre>
| |
| | |
| 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.
| |
| | |
| <pre class="language-javascript">
| |
| 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'
| |
| });
| |
| });
| |
| </pre>
| |
| | |
| === Naming conventions in CSS code ===
| |
| | |
| The CSS must follow some easy structure. There must be a base class for all icons that defines the background image. It must match the name of your icon set prefixed with “.emoji-”.
| |
| | |
| Each icon will then be identified by a string that can be defined in the icon set metadata.
| |
| | |
| Find here a short example copied from the unified icon set shipped with Appsuite.
| |
| <pre>
| |
| .emoji-unified {
| |
| background: url("emoji.png") top left no-repeat;
| |
| width: 20px;
| |
| height: 20px;
| |
| display: -moz-inline-stack;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| zoom: 1;
| |
| *display: inline;
| |
| }
| |
| .emoji2600 {
| |
| background-position: -500px -120px;
| |
| }
| |
| </pre>
| |
| | |
| | |
| [[Category:Server]]
| |
| [[Category:UI]]
| |
| [[Category:i18n]]
| |
| [[Category:Config]]
| |
| [[Category:AppSuite]]
| |