TinyMce, NPDS et le PAD #1
Date : vendredi 06 avril 2012 @ 15:39:37 :: Sujet : NPDS
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 :
- 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;
}";
- 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;
}
});
};
- 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.
|