Saisie semi-automatique des émojis

Saisissez des émojis comme dans une messagerie : :smile: devient 😄 dès la saisie du deux-points final ; un deux-points suivi de quelques lettres ouvre sous le curseur une courte liste d’émojis correspondants. Aucun bouton : tout se fait au clavier.

L’éditeur avec le texte Great work on the release :ta et une liste sous le curseur affichant tada, taco, star_struck, star, star2, rotating_light, cocktail et guitar, chacun accompagné de son émoji — Après la saisie de `:ta`. Les noms commençant par ces lettres apparaissent en premier, puis ceux qui les contiennent. Entrée a inséré 🎉.

Activation

Cette fonctionnalité est fournie par le plugin emojiautocomplete.js (également inclus dans plugins/all_plugins.js). Il suffit de le charger : il est activé par défaut et ne nécessite aucun élément dans la barre d’outils.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/emojiautocomplete.js"></script>

<div id="div_editor1"><p>Great work on the release </p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertemoji}|{undo,redo}"
});
</script>

Comme all_plugins.js l’inclut, toute page chargeant all_plugins.js active la saisie semi-automatique des émojis. Définissez emojiAutocompleteEnabled: false pour la désactiver.

Options

Option	Valeur par défaut	Fonctionnement
`emojiAutocompleteEnabled`	`true`	Active ou désactive à la fois la conversion et la liste.
`emojiShortcodes`	Une table intégrée de 286 noms (`smile`, `+1`, `tada`, `rocket`, `heart` …)	Les noms reconnus par le plugin, sous la forme `{ name: "emoji" }`. Définir cette option remplace la table intégrée.
`text_emoji_suggest`	`"Emoji suggestions"`	Nom accessible de la liste.

Pour conserver les noms intégrés et ajouter les vôtres, copiez d’abord la table par défaut :

var editor1 = new RichTextEditor("#div_editor1", {
  emojiShortcodes: Object.assign({}, RTE_DefaultConfig.emojiShortcodes, { shipit: "\u{1F6A2}", lgtm: "\u{1F44D}" })
});

Avec cet éditeur, :shipit: a donné 🚢, :smile: a toujours donné 😄, et :lg a proposé :lgtm:. Avec uniquement emojiShortcodes: { shipit: "\u{1F6A2}" }, :smile: est resté tel que saisi.

Utilisation

Code complet. Saisissez :name:. À la saisie du deux-points final, si le nom figure dans la table, le code est remplacé par l’émoji. Les noms inconnus, comme :nosuchcode:, restent du texte.
La liste. Saisissez : et au moins une lettre, un chiffre, _, + ou -. Jusqu’à huit résultats apparaissent ; chaque émoji n’apparaît qu’une fois, sous son premier nom correspondant. Flèche bas et Flèche haut déplacent la sélection, Entrée ou Tab insèrent, Échap ferme la liste, et un clic insère.
Annulation. Ctrl+Z (Cmd+Z sur Mac) juste après une conversion rétablit le code saisi : :rocket: → 🚀 → :rocket:. Si vous appuyez d’abord sur une autre touche, Ctrl+Z effectue l’annulation habituelle de l’éditeur.
Le deux-points doit commencer un mot : il doit suivre un espace, un signe de ponctuation ou le début du texte. release:ta ne fait rien ; release :ta ouvre la liste. Cela préserve les heures comme 10:30 et les URL.
Aucune conversion n’a lieu dans <code> ou <pre>.

À savoir

Le résultat est uniquement le caractère émoji dans le texte. Après la saisie de :ta et Entrée, puis and :rocket: :
```
<p>Great work on the release 🎉 and 🚀</p>
```
Les noms sont comparés en minuscules. La table intégrée contient des noms de type GitHub ; +1 et thumbsup donnent tous deux 👍.
La liste est ajoutée au corps de la page (hors de l’éditeur) avec la classe rte-emoji-pop, mise en forme par rte_theme_default.css. Elle suit le mode sombre de l’éditeur (rte-dark, ou rte-auto-dark avec un système configuré en mode sombre).
Le plugin fonctionne seul, sans le sélecteur d’émojis. Le sélecteur permet de parcourir les émojis ; la saisie semi-automatique s’adresse aux personnes qui connaissent leur nom.

Voir aussi : sélecteur d’émojis, configuration.