Dans le précédent article, nous avons bien avancé mais il nous manque certaines bricoles et notamment :
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 !
Cet article provient de NPDS
L'url pour cet article est :
https://www.npds.org/article.php?sid=1824