Sélecteur d’émojis

Un bouton de la barre d’outils ouvre une grille avec recherche contenant 1,037 émojis dans huit catégories. Cliquez sur l’un d’eux, ou choisissez-le au clavier : il est inséré à la position du curseur sous forme de caractère Unicode simple.

Activation

Cette fonctionnalité est fournie par le plugin insertemoji.js (également inclus dans plugins/all_plugins.js). L’élément de la barre d’outils est insertemoji (infobulle « Insert Emoji »). Il figure déjà dans les barres d’outils default, basic, full et mobile : il suffit donc d’y charger le plugin. Dans votre propre barre d’outils, ajoutez insertemoji à l’endroit souhaité :

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

<div id="div_editor1"><p>Thanks for the update. Ship it on Friday </p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertemoji}|{undo,redo}"
});
</script>

Sans le plugin, le bouton ne fait rien. Une barre d’outils personnalisée n’est utilisée que si la fenêtre du navigateur atteint au moins maxWidthForMobile (992 px) de large ; en dessous, l’éditeur affiche toolbarMobile, qui possède le bouton émoji par défaut.

Options

Le sélecteur n’a pas d’options de comportement. Vous pouvez définir ses textes et sa langue :

Option	Valeur par défaut	Fonctionnement
text_insertemoji	"Insert Emoji"	Infobulle du bouton de la barre d’outils.
text_searchemojis	"Search"	Texte indicatif du champ de recherche.
text_emoji_smileys … text_emoji_symbols, text_emoji_recent	Le nom anglais de la catégorie (« Smileys », « Recently used »…)	Titres des catégories et infobulles des onglets. Les huit catégories sont les visages, les personnes, les animaux, la nourriture, les voyages, les activités, les objets et les symboles.
text_emoji_items	"{0} items"	Nombre de résultats affiché au-dessus des résultats de recherche.
text_uilocale	non défini (défini par un module de langue)	Pour de es fr it ja ko nl pt pt-pt ru zh-Hans zh-Hant, le sélecteur charge lang/emoji/rte-emoji-<locale>.js à sa première ouverture, puis affiche et recherche les noms dans cette langue. Les noms anglais restent reconnus.
url_base	"/richtexteditor"	Dossier depuis lequel le fichier de noms d’émojis ci-dessus est chargé.

Les modules de langue définissent toutes ces valeurs pour vous. Avec lang/rte-lang-de.js chargé, le champ de recherche affiche « Suche », les onglets « Personen », « Tiere », etc., et une recherche de « rakete » trouve 🚀.

Utilisation

• Recherche. Le champ de recherche reçoit le focus à l’ouverture. La saisie filtre toutes les catégories par nom (« rocket » trouve 🚀) et affiche le nombre de résultats.
• Catégories. La rangée d’onglets change de catégorie. Seule la catégorie ouverte est dessinée, ce qui permet une ouverture rapide du panneau.
• Utilisation récente. Les 16 derniers émojis insérés depuis le sélecteur sont conservés dans localStorage sous la clé rte-emoji-recent. Si la liste n’est pas vide, le sélecteur s’ouvre sur cet onglet. Si le stockage est bloqué, la liste ne dure que le temps de la page courante.
• Clavier. Tab passe du champ de recherche à la grille. Les flèches naviguent entre les émojis (haut et bas vont à l’émoji le plus proche sur la rangée voisine), Début et Fin vont au premier et au dernier, Entrée ou Espace insèrent, Échap ferme le sélecteur.
• Depuis un script. editor1.execCommand("insertemoji") ouvre le même sélecteur. Le menu de commandes slash le présente sous le nom « Emoji ».

À savoir

• L’émoji est enregistré tel quel, sans élément conteneur. Après le choix de 🚀, le contenu est :

  <p>Thanks for the update. Ship it on Friday🚀 </p>

  Enregistrez le HTML en UTF-8 (dans une base de données, utilisez une colonne acceptant les caractères sur quatre octets, comme utf8mb4 dans MySQL).
• L’apparence d’un émoji dépend de la police du système du lecteur. Un même caractère peut différer sur Windows, macOS et Android.
• La liste est fixe dans le plugin. Aucune option ne permet d’ajouter ou de retirer des émojis du sélecteur.
• Pour saisir des émojis sous la forme :shortcode: sans ouvrir le sélecteur, consultez la saisie semi-automatique des émojis.

Voir aussi : référence des éléments de la barre d’outils, barre d’outils mobile, démonstration des caractères spéciaux.