Activité du site

Pages vues depuis Novembre 2002 : 12 730 009

  • Nb. de Membres : 7 435
  • Nb. d'Articles : 670
  • Nb. de Forums : 47
  • Nb. de Sujets : 9
  • Nb. de Critiques : 17

Top 10  Statistiques

TinyMce, NPDS et le PAD #2
 |  Auteur: NPDS
Rechercher dans NPDS

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 !




Posté le:Mardi 10 avril 2012 @ 18:42:07       Page Spéciale pour impression Envoyer cet Article à un ami     Précédent |  Suivant