Gestion de Contenu, de Communauté et de groupes de travail collaboratif - Open Source, français, sécurisé, stable et performant

Dans le cadre du développement d'un module dont vous allez bientôt entendre parler, TinyMce devait acquérir de nouvelles fonctionnalités - à savoir :

• coloriser automatiquement le texte saisi par un internaute dans une certaine couleur de fond
• maintenir cette colorisation quelque soit les déplacements réalisés (souris, curseurs)
• avoir ce comportement particulier ... que dans le module évoqué

OK mais comment faire ?

D'abord avoir recours au fichier de configuration de Tiny pour NPDS :

editeur/tiny_mce/themes/advanced/npds.conf.php

Apprendre à ce fichier à charger une extension si besoin ...  évidement via pages.php :

if ($setup[1]=="setup") {
   global $ModPath;
   if (file_exists("modules/$ModPath/tiny_mce_setup.php")) {
      include_once("modules/$ModPath/tiny_mce_setup.php");
   }
}

Extension nous voila :

1. Définir une fonction complémentaire de Tiny qui sera chargée ... au chargement (!)  et une variable static pour conserver l'état du surlignement.

setup: function (ed) {
      // faisons une 'static' en javascript
      if ( typeof this.counter == 'undefined' ) this.counter = 0;
}";

1. Définir (et trapper) les événements du clavier : droite, gauche, haut et bas notamment

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

qui devient avec le code de capture des touches

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;
      }
   });
};

1.  On trappe les touches mais et le surlignement ?

nous allons utiliser notre constante (static), on définit un style (chaque auteur aura le sien) et on applique le style via la commande TinyMce : formatter.apply

      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;
      }

Si tous se passe bien ce 'setup' va être implémenté au chargement du module par TinyMce et faire ce pour quoi ... il est fait.

Mais il manque des 'bricoles' ... la suite / dans le prochain article.