PluXml Home Documentation Ressources Forum Blog PluCSS Github

plxToolbar: créer vos propres boutons

Written by Stephane 2 comments
Avec la sortie de PluXml 5.0, il est désormais possible d’enrichir la plxToolbar avec ses propres boutons, afin d'automatiser les tâches de saisie de texte.

Les bases


Si vous aimez utiliser la barre d'outils plxToolbar intégrée par défaut dans PluXml pour rédigé vos articles, vous apprécierez surement la possibilité de créer vos propres boutons pour ajouter rapidement et facilement de texte dans la zone de rédaction.

Avec la sortie de PluXml 5.0, il est désormais possible d’enrichir la plxToolbar. Avec un peu de programmation et quelques règles à respecter, nous allons donc voir comment rajouter des nouvelles icones dans la barre d’outils.

Pour commencer il nous faut créer 2 dossiers : un dossier nommé addons à la racine de Pluxml, puis un dossier plxtoolbar.buttons dans le dossier addons précédemment créé de manière à obtenir cette arborescence :



Dans le dossier plxtoolbar.buttons, nous allons créer le fichier php qui sera automatiquement lu et chargé par PluXml.

Tous les fichiers des boutons doivent commencer par buttons. + un libellé identifiant le nom du bouton (pas de caractères spéciaux, accentués ou d’espace dans ce libellé)

Exemple : button.helloworld.php

A titre d’exemple nous allons créer un bouton qui affichera « Hello world » grâce au fichier button.helloworld.php

Voici le code du fichier : addons/plxtoolbar.buttons/button.helloworld.php


(cliquer pour agrandir)

Voyons en détail les éléments indispensables de ce fichier :

Ligne 1 : Cette déclaration permet de sécuriser le script en cas d’appel sans passer par pluxml. Autant dire qu’il est vivement conseillé de l’ajouter.

Ligne 3 : Début du script javascript qui va nous permettre de créer notre bouton

Ligne 5 : L’objet plxToolbar représente la barre d’outils plxToolbar. En appelant sa méthode addButton nous allons définir les propriétés qui permettent de déclarer un nouveau bouton. Ces propriétés sont au nombre de 3

icon (ligne 6) : permet de définir l’emplacement de l’image servant d’icône dans la barre d’outils. Il est conseillé de mettre l’image dans le dossier addons/plxtoolbar.buttons et d’utiliser < ?php echo PLX_ROOT ?> dans la définition du début du chemin.

title (ligne 7) : est le titre affiché lorsque la souris survole le bouton

onclick ligne 8) : contient le code de l’événement javascript onclick, déclenché lorsque l’on clique sur le bouton. Il suffit de retourner une chaine de caractère pour que celle-ci soit ajoutée dans la zone de rédaction

Exemple :

onclick : function() {
     return 'Hello world !';
}


Ligne 14 : on marque la fin du code javascript

Exemple : un bouton Youtube pour ajouter le code du lecteur Youtube


Maintenant que nous avons vu les bases pour créer un bouton, nous allons concrètement ajouter un bouton Youtube. Celui-ci va permettre d’insérer dans la zone d’édition le code du lecteur vidéo de Youtube. Afin de rendre la saisie encore plus facile, nous ouvrirons une fenêtre de dialogue permettant de saisir l’url de la vidéo que nous souhaitons afficher.

Contenu du fichier addons/plxtoolbar.buttons/button.youtube.php


(cliquer pour agrandir)

Nous retrouvons ici tous les mêmes éléments décris dans notre bouton de test « Hello world »

Le l’url d’une vidéo sur Youtube est de la forme : http://www.youtube.com/watch?v=xxxxxxx
Or dans le code d’affichage du lecteur vidéo, il faut transformer cette url en : http://www.youtube.com/v/xxxxxx
C’est la fonction get_url_param qui va se charger d’isoler le nom de la vidéo (ici : xxxxx) saisie dans la fenêtre de dialogue appelée par l’instruction prompt. En retour, l’événement onclick retourne une chaine de caractère contenant le code du lecteur vidéo, code qui sera ajouté dans la zone d’édition par la plxToolbar.


Conclusion


L’ajout de boutons personnalisés dans la plxToolbar peut vous éviter de taper des longues lignes de code dans la zone d’édition lors de la rédaction d’articles.. Un clic est le code sera ajouté automatiquement : de quoi encore gagner du temps

2 comments

#1  - frederic said :

Vraiment un gros plus de pouvoir personnaliser ses boutons.
A vous la communauté de nous en proposer pleins d'autres comme ça =)

Reply
#2  - super_g2 said :

d'ailleurs, une section addons et plxbutton est à prévoir sur le forum ou pas?

Reply

Write a comment

What is the last character of the word h5psxnj?

Rss feed of the article's comments