JoomlaFCK - Personnaliser la barre d'outils

Appréciation moyenne:  / 0
Très mauvaisTrès bien 

Personnaliser la barre d'outils de JoomlaFCK

partant du principe de JommlaFCK est une adaptation pour Joomla de FCKEDitor, je suis allé voir comment personnaliser la barre d'outils de FCKEDitor.

Après avoir suivi le tuto à la lettre, aucune modification n'est apparue sur cette barre, damned! 

Je suis ensuite aller voir sur le site JoomlaFCK en quête d'un tuto ou d'infos, mais je n'ai rien trouvé, juste une petite piste à propos d'un fichier jtoolbarsetconfig.xml.

Voici dans ce document une méthode pour une barre d'outils JoomlaFCK, soit par l'ajout d'un bouton d'une barre vers une autre, soit carrément pour ajouter son propre bouton pointant sur son propre plugin.

Organisation des barres d'outil dans JoomlaFCK

La première chose à repérer, c'est l'organisation de JoomlaFCK.

Par rapport à FCKEditor qui permet de paramétrer des barres d'outils dans le fichier fckconfig.js ou son propre ficher de config, JoomlaFCK, lui, donne la possibilité de gérer les barres d'outils dans le fichier
plugins/editors/fckeditor/editor/jtoolbarsetconfig.xml
Pas de soucis malgré tout, JoomlaFCK appelle bien notre fichier de config si on en a un, j'ai vérifié 

C'est donc sur ce fichier jtoolbarsetconfig.xml que l'on va travailler directement.

Organisation du fichier des barres d'outil de JoomlaFCK

jeu de barres d'outils:

L'ensemble des barres d'outils est encadrée par une balise 



<toolbarsets></toolbarsets>

 Dans ce fichier il y a une deuxième balise dont je ne connais pas le sens mais que je paramètre par rapport à ce qu'il y a déjà dedans au cas où...



<customplugins></customplugins>
les barres d'outils:

Chaque barre d'outils, est encadré par une balise:



<toolbar name="Advanced"></toolbar>

On commence à reconnaitre là les paramètres que l'on peut choisir au niveau de l'administration du plugin, à savoir le nom des barres d'outils, ici Advanced.
Donc, la logique veut ici que si l'on souhaite personnaliser la barre d'outils Advanced, c'est entre ces balises que ça se passe.
Pour celle nommée Creative, attaquer la personnalisation entre les balises toolbar name="Creative", etc.

Un second regroupement est fait avec une balise:



<plugingroups></plugingroups>

qui englobe dans le fichier d'origine la barre d'outils entière.

Il serait intéressant de créer un second plugingroups dans une barre d'outils pour voir quel effet cela donne.
Une première idée, sans tester, me vient à l'esprit: on doit peut-être pouvoir séparer une barre d'outils, pour par exemple pouvoir masquer un groupe ou l'autre avec ça...

Je teste donc en rajoutant un groupe plugingroups, avec un bouton About dedans:



<plugingroups>
  <plugingroup>
    <plugin name="About" acl="*"/>
  </plugingroup>
</plugingroups>

mais finalement ça ne fait que rajouter le bouton à la suite de la barre d'outil, donc l'intérêt pour le moment n'est pas visible.

Les groupes de boutons:

Pour chaque barre d'outils, on va pouvoir regrouper plusieurs boutons ensembles. Pour ce faire, on utilise la balise:



<plugingroup></plugingroup>

attention à l'absence de pluriel ici.

En observant la barre d'outils de joomlaFCK, on voit bien ce regroupement de boutons...
Prenons comme exemple le groupe de boutons pour aligner le texte, à gauche, à droite, centré ou justifié:



<plugingroup>
    <plugin name="JustifyLeft" acl="*"/>
    <plugin name="JustifyCenter" acl="*"/>
    <plugin name="JustifyRight" acl="*"/>
    <plugin name="JustifyFull" acl="*"/>
</plugingroup>

voilà, c'est très clair avec cet exemple...
  acl, je ne sais pas à quoi ça sert, mais lorsque je l'enlève, le bouton ne s'affiche pas, donc je le laisse (ça me fait penser à une autorisation d'accès, access control list pour acl, mais peut-être en cours d'implémentation)

Le bouton proprement dit:

Avec les explications précédentes, l'insertion du bouton saute aux yeux:



<plugin name="About" acl="*"/>

Voilà, on est maintenant paré pour créer, organiser, personnaliser sa propre barre d'outils.

Simplement, on ne sait pas encore comment ajouter un bouton pointant vers son propre plugin dans une barre des barres d'outils.

Dernier conseil: vider le cache du navigateur et recharger la page, sinon on ne voit rien changer 

Pour travailler correctement, j'utilise un navigateur spécialement paramétré (Internet explorer, puisque je ne l'utilise pas par ailleurs) pour aller toujours récupérer la page demandée sans jamais la prendre dans le cache. Ainsi, à chaque rafraichissement d'une page, j'ai la nouvelle version sans avoir besoin de nettoyer le cache.


Ajouter un bouton d'une barre d'outil vers une autre

Nous allons travailler sur la barre Advanced.

J'ai repéré sur la barre Creative un bouton intéressant, un pagebreak.

Je vais l'ajouter à la barre Advancer que j'utilise.
Pour ce faire, je copie ce code:



<plugin name="PageBreak" acl="*"/>

et je le colle dans un groupe à côté du bouton 'Séparateur' qui crée une ligne horizontale, comme ceci:



<plugingroup>
          <plugin name="ImageManager" acl="*"/>
          <plugin name="Image" acl="*"/>
          <plugin name="Flash" acl="*"/>
          <plugin name="Spacer"/>
          <plugin name="Table" acl="*"/>
          <plugin name="Rule" acl="*"/>
          <plugin name="PageBreak" acl="*"/>
</plugingroup>

Vidage du cache, rafraichissement, et voilà.

Notez au passage le plugin Spacer, qui devrait insérer un espace entre deux boutons, mais qui ne semble pas faire grand-chose chez moi...


Ajouter un groupe de bouton, enlever un groupe de bouton etc

Maintenant que la structure du fichier est claire, il est facile de manipuler tout ça.

Pour enlever un groupe de bouton, il suffira de repérer la balise l'encadrant et de tout supprimer.

Pour ajouter un groupe de bouton, c'est l'opération inverse.

Je souhaite par exemple extraire le bouton About pour qu'il soit tout seul, à la fin de la barre d'outils, bien séparé des autres.

Au départ, il est intégré au dernier groupe de boutons, comme ceci:



<plugin name="Spacer"/>
<plugin name="About" acl="*"/>

Je vais créer un nouveau groupe, enlever le Spacer qui ne servira plus (déjà qu'il ne servait pas à grand-chose chez moi), et insérer dans ce nouveau groupe le bouton About, ça donne ceci:
 



        <plugingroup
          <plugin name="About" acl="*"/>
        </plugingroup>

qui vient juste après la balise de fermeture du groupe précédent.

Voilà, je pense qu'avec ça tout le monde est paré pour se faire sa propre barre d'outils pour JoomlaFCK


Créer sa propre barre d'outils

Pour synthétiser tout ce que l'on vient de voir, nous allons créer notre propre barre d'outils, simplifiée, mais fonctionnelle:

D'abord, créons son enveloppe:

Je me positionne en haut du fichier, c'est plus pratique.
Juste après la balise d'ouverture toolbarsets, je crée ceci:



<toolbar name="Tr@nquille">
</toolbar>

Créons maintenant l'enveloppe des groupes de plugin:
 



<toolbar name="Tranquille">
  		<plugingroups>
  		</plugingroups>
</toolbar>

Puis créons notre premier regroupement de boutons:



<toolbar name="Tranquille">
  		<plugingroups>
  			<plugingroup>
  			</plugingroup>
  		</plugingroups>
</toolbar>

Ajoutons-y des boutons:



<toolbar name="Tranquille">
  		<plugingroups>
  			<plugingroup>
  				<plugin name="Find" acl="*"/>
					<plugin name="Replace" acl="*"/>
					<plugin name="JustifyLeft" acl="*"/>
          <plugin name="JustifyCenter" acl="*"/>
          <plugin name="JustifyRight" acl="*"/>
          <plugin name="JustifyFull" acl="*"/>
  			</plugingroup>
  		</plugingroups>
</toolbar>

Ajoutons un second groupe de boutons, puis un bouton dedans:



<toolbar name="Tranquille">
  		<plugingroups>
  			<plugingroup>
  				<plugin name="Find" acl="*"/>
					<plugin name="Replace" acl="*"/>
					<plugin name="JustifyLeft" acl="*"/>
          <plugin name="JustifyCenter" acl="*"/>
          <plugin name="JustifyRight" acl="*"/>
          <plugin name="JustifyFull" acl="*"/>
  			</plugingroup>
				<plugingroup>
          <plugin name="Hello_World" acl="*"/>
          <plugin name="About" acl="*"/>
        </plugingroup>
  		</plugingroups>
</toolbar>

Et voilà notre barre d'outils créée.

Reste à indiquer à joomlaFCK que l'on souhaite l'utiliser.

Installer la barre d'outils

Pour pouvoir aller sélectionner notre barre d'outils dans la configuration de JoomlaFCK, Menu Extension, Gestion des plugins, il faut aller modifier le fichier de paramétrage de JoomlaFCK:



/plugins/editors/fckeditor.xml

Nous allons rajouter une option dans le paramètre toolbar, qui gère les choix de barres d'outils pour le back-end, comme ceci:



<param name="toolbar" type="list" default="Advanced" label="Administrator End Toolbar Mode" description="FUNCTIONBK">
			<option value="Advanced">Advanced</option>
			<option value="Creative">Creative</option>
			<option value="Blog">Blog</option>
			<option value="Default">Default</option>
			<option value="Tranquille">Tranquille</option>
</param>

Si nous avions voulu l'ajouter en Front-End, il aurait suffit d'ajouter la ligne dans le paramètre toolbar_ft

Ah, au fait...
Vous avez sans doute remarqué que je n'ai pas rajouté un bouton, mais deux boutons à notre dernier groupe, mais quel est ce bouton mystérieux que vous ne trouverez dans aucune barre d'outils par défaut?

C'est l'objet d'un prochain articlequi expliquera comment créer un plugin pour JoomlaFCK et intégrer son bouton dans la barre d'outil.