13.2 Enregistrer un émoji sans utf8mb4

Lorsqu'on veut enregistrer des émoji dans la base de données, l'idéal est de travailler avec l'encodage utf8mb4 puisque cet encodage supporte les caractères sur 4 octets comme les émojis.

Si ceci n'est pas possible, par exemple en raison des configurations chez votre hébergeur, je vous présente ici une astuce pour contourner le problème.

L'astuce consiste à convertir l'émoji vers son shortname, par exemple :grinning:, avant d'enregistrer le texte puis de le reconvertir en émoji lors de l'affichage.

J'ai choisi d'effectuer ce travail en JavaScript. J'utilise pour cela la bibliothèque JoyPixels : https://demos.joypixels.com/latest/index.html.

À la base, JoyPixel est conçu pour remplacer les émojis par une image équivalente, tirée d'une banque qu'il faut télécharger. Au moment d'écrire ces lignes, la bibliothèque était gratuite pour utilisation personnelle (voir https://www.joypixels.com/licenses/free) mais il fallait l'acheter pour pouvoir l'utiliser commercialement.

Par contre, il est possible de travailler sans les images puisque JoyPixels contient des fonctions pour convertir un émoji en son shortname et pour convertir un shortname en émoji. Fantastique !

Voici donc comment procéder :

• Affichez le fichier de la bibliothèque JavaScript de JoyPixels dans votre navigateur : https://demos.joypixels.com/latest/lib/js/joypixels.js et enregistrez-le dans le dossier js de votre projet.
• Ajoutez une balise <script> afin d'inclure JoyPixels dans votre page Web.
  HTML

  <script src="js/joypixels.js"></script>

• Lors de la soumission du formulaire qui contient les émoji, exécutez le code suivant avant de procéder à l'enregistrement avec PHP.
  JavaScript

  $(function() {

      $('form').submit(function(event) {
          // Convertit les emoji en shortnames (:smiley:) donc pourront être enregistrés sans utf8mb4
          $('#commentaire').val(joypixels.toShort($('#commentaire').val()));
      });
  });

• Avant d'afficher une page à l'écran, convertissez en émojis les shortnames du texte tiré de la BD.
  
  JavaScript

  $(function() {

      // Convertit les shortnames en émojis avant d'afficher le texte
      $('#commentaire').val(joypixels.shortnameToUnicode($('#commentaire').val()));
  });