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

  • MODULES

    Pour étendre les nombreuses fonctionnalités disponibles de base - modules.npds.org est à votre disposition.

    Des modules complémentaires, une communauté de développeurs active, des forums pour vos questions ... NPDS  est aussi une plateforme de développement !
  • STYLES

    Vous cherchez des thèmes graphiques pour votre portail ou votre communauté : styles.npds.org est à votre disposition.

    Des thèmes du plus simple au plus sophistiqué. Des thèmes facilement modifiables et toujours en Open-Source - Laissez simplement parler votre imagination !
  • BIBLES

    La documentation indispensable pour personnaliser et exploiter toute la puissante de NPDS  est à votre disposition sur bible.npds.org.

    Vous pouvez participer à l'effort de documentation - rien de plus simple : contactez un membre de la Team de développement et nous vous ouvrirons un compte sur le Wiki !
Devenir membre    |    Identifiant : Mot de Passe : -
Au delà de la gestion de contenu 'classique', NPDS met en oeuvre un ensemble de fonctions spécifiquement dédiées à la gestion de Communauté et de groupes de travail collaboratif.
Il s'agit d'un Content & Community Management System (CCMS) robuste, sécurisé, complet, performant et parlant vraiment français.

Gérez votre Communauté d'utilisateurs, vos groupes de travail collaboratif, publiez, gérez et organisez votre contenu grâce aux puissants outils disponibles de base.
  • Multi langues (Français, Anglais, Allemand, Espagnol, Chinois)
  • Respect des standards : UTF8, XHTML, CSS, ...
  • Système de blocs avancés
  • Installation et administration complète et centralisée
  • Editeur HTML intégré
  • Gestionnaire de fichier en ligne
  • Gestion des groupes de membres
  • Ecriture collaborative de documents (PAD)
  • Forums évolués
  • Mini-sites (pour les membres et les groupes de travail)
  • Chat temp réel
  • Système de News et de rubriques complet (édition, révision, publication)
  • ...
Gratuit et libre (Open-Source), développé en PHP, NPDS est personnalisable grâce à de nombreux thèmes et modules et ne requiert que quelques compétences de base.
NPDS Workplace - groupe de travail collaboratif
 NPDS WorkSpace - tous l'univers du travail collaboratif.
TinyMce, NPDS et le PAD #2
Posté par : developpeur

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 !



Mardi 10 avril 2012 @ 15:49:53    Page Spéciale pour impression Envoyer cet Article à un ami    Précédent |  Suivant

Temps : 0.0626 seconde(s)