Dans le précédent article, nous avons bien avancé mais il nous manque certaines bricoles et notamment :

• la capture de la touche backspace
• la capture de la touche Return
• les déplacements à la souris

et au moins une explication : comment chaque auteur aura-t-il une couleur spécifique ?

Reprenons notre code ou nous l'avions laissé :

setup: function (ed) {
   ed.onKeyDown.add(function(ed, e) {
      // faisons une 'static' en javascript
      if ( typeof this.counter == 'undefined' ) this.counter = 0;

      // On capte les touches de directions
      if (e.keyCode >= 37 && e.keyCode
         this.counter=0;
         return true;
      }

      if (this.counter==0) {
         tinymce.activeEditor.formatter.register('wspadformat', {
            inline     : 'span',
            styles     : {'background-color' : '$surlignage'},
            classes    : '$auteur'
         });
         tinymce.activeEditor.formatter.apply('wspadformat');
         this.counter=1;
      }
   });
}

Pour la touche backspace et la touche Return, il faut trapper les keycode : 8 et 13 / Facile

      if ((e.keyCode == 8) || (e.keyCode == 13)) {
         this.counter=0;
         return true;
      }

Pour la souris il va nous falloir une nouvelle fonction et partir du postulat que si la souris est déplacée alors le surlignement est à reprendre.

   // déplacement dans le RTE via la sourie
   ed.onMouseDown.add(function(ed, e) {
      this.counter=0;
   });

Simple non ?

Le setup complet devient donc :

setup: function (ed) {
   ed.onKeyDown.add(function(ed, e) {
      // faisons une 'static' en javascript
      if ( typeof this.counter == 'undefined' ) this.counter = 0;

      // On capte les touches de directions
      if (e.keyCode >= 37 && e.keyCode
         this.counter=0;
         return true;
      }
      // On capte la touche backspace et Return
      if ((e.keyCode == 8) || (e.keyCode == 13)) {
         this.counter=0;
         return true;
      }

      //ed.windowManager.alert('key : ' + e.keyCode);

      if (this.counter==0) {
         tinymce.activeEditor.formatter.register('wspadformat', {
            inline     : 'span',
            styles     : {'background-color' : '$surlignage'},
            classes    : '$auteur'
         });
         tinymce.activeEditor.formatter.apply('wspadformat');
         this.counter=1;
      }
   });

   // déplacement dans le RTE via la sourie
   ed.onMouseDown.add(function(ed, e) {
      this.counter=0;
   });
}

PS : la ligne //ed.windowManager.alert('key : ' + e.keyCode); vous permet d'afficher le Keycode de la touche (si vous enlevez la marque de commentaire ...)

Et $surlignage ?

La question est de savoir comment générer directement un code couleur type #XXYYZZ en partant du pseudo de l'auteur (histoire que chaque auteur est un code couleur relativement différent).

Quelques tentatives plus tard, la fonction retenue est la suivante :

$surlignage="#".substr(md5($auteur),0,6);

substr( ... ..., 6) pour n'avoir que les 6 premières valeurs du hachage réalisé par la fonction MD5 / pourquoi MD5 ... parceque cette fonction produit des empreintes au format Hexadécimal ... et c'est justement le format RGB de nos couleurs.

La boucle est bouclée, reste à mettre tous cela dans un module ... mais c'est une autre histoire / A découvrir sur NPDS

PS : Sans TinyMce ce module n'aurait pas pu voir le jour !