JoomlaFCK créer un plugin et l'intégrer à une barre d'outil

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

Créer un plugin JoomlaFCK et l'intégrer à une barre d'outils

Nous allons dans cet article apprendre à créer un plugin simple qui affichera un simple message Hello World, comme le veut la tradition.

Ensuite, nous verrons comment faire pour qu'il soit pris en compte dans une des barres d'outils joomlaFCK.

Pour en savoir plus sur les barres d'outils et leur personnalisation, voir l'article JoomlaFCK - Personnaliser la barre d'outils

Création de l'arborescence du plugin

Tout d'abord, il va falloir créer un répertoire dans le dossier des plugins de joomlaFCK:





/plugins/editors/fckeditor/editor/plugins

répertoire que nous appellerons helloworld.

Attention, le respect des majuscules/minuscules est primordial pour le bon fonctionnement du plugin!

dans ce dossier helloworld, nous allons créer un dossier nommé lang

Créons dans ce dossier lang un fichier nommé en.js et un autre nommé fr.js

Dans le dossier racine du plugin, helloworld, créons un fichier nommé fckplugin.js.

Puis créons-en trois autres nommés helloworld.js, helloworld.html et helloworld.gif.

Disons que pour le helloworld.gif, il va falloir utiliser un logiciel de dessin pour créer un fichier gif de 16*16 pixels.
Et si on ne veut pas se prendre la tête à ce niveau, il suffit de prendre un fichier.gif déjà fourni, par exemple:





/plugins/editors/fckeditor/editor/plugins/jlink.old/jLink.gif

Nous devons nous retrouver avec l'arborescence suivante:

arborescence_plugin.jpg

Intéressons-nous maintenant au contenu des fichiers


Les fichiers de langue

Ces fichiers de langues vont contenir tout ce que l'on souhaitera afficher comme texte.

Nous en avons actuellement deux, un pour le français et l'autre pour l'anglais.

Ainsi, lors de l'exécution du plugin, en fonction de la langue par défaut de JoomlaFCK, les messages seront automatiquement "traduits".

Pour le moment, on va faire simple, le fichier fr.js contient:





FCKLang.Titre = 'Allons dire boujour à tout le monde' ;
FCKLang.TexteBouton = 'Bonjour Monde' ;
FCKLang.Message = 'Bonjour Monde !!!' ;

Et en anglais, pour le fichier en.js, ça donne ça:





FCKLang.Titre = 'Come say hello to everyone' ;
FCKLang.TexteBouton = 'Hello World' ;
FCKLang.Message = 'Hello World !!! ' ;

La première ligne déclare une variable qui contient le texte à afficher lorsqu'on survolera le bouton de notre plugin

La seconde nous servira à afficher un message dans la fenêtre.


La page html servant de fenêtre de dialogue

Pour afficher notre message, nous allons utiliser une page html qui s'affiche sous forme de popup.

Celle-ci se nomme helloworld.html.

Voici son contenu:





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title fcklang="Titre"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta content="noindex, nofollow" name="robots">
    <script type="text/javascript">
      var oEditor = window.parent.InnerDialogLoaded();
      var FCKConfig = oEditor.FCKConfig;
      document.write('<script src="' + FCKConfig.BasePath + 'dialog/common/fck_dialog_common.js" type="text/javascript"><\/script>');
    </script>
    <script src="helloworld.js" type="text/javascript"></script>
		<style type="text/css"> 
			body
			{
				overflow: hidden;
			}
			#txtMessage			
                        {
				background-color: #EDEDED;
				width: 60%;
				font-weight: normal;
				font-family: "Courier New", Courier, monospace;
				margin-top: 10px;
				text-align: center;
			}
		</style>
  </head>
  <body>
  	<div id="txtMessage">
				<strong><span id="LeMessage" style="width:100%; display: block; padding: 4px;" class="DarkBackground" fcklang="Message"></span></strong>
		</div>
  </body>
</html>

 Remarquons déjà ligne 3 comment nous utilisons les variables contenant nos textes en différentes langues.

Le principe est d'utiliser un tag propre à FCKEditor (fcklang) avec le nom de la variable que l'on souhaite utiliser.

Lignes 6 à 10, nous initialisonsquelques parties propres à FCKEditor sur lesquelles je ne m'étends pas puisque je n'ai fait que les reprendre d'un autre plugin  je suppose qu'elles sont utiles, il faudrait que j'essaie un jour sans, mais pas maintenant.

Ligne 11, nous déclarons notre propre script, celui qui va gérer le plugin.

Lignes 12 à 26, un peu de css pour montrer comment on peut en utiliser.

Et ligne 30, affichage de notre message, via le tag fcklang et sa variable associée.
Petite remarque au passage, notez l'utilisation d'une classe DarkBackground fournie par fckeditor. Il y en a d'autres, mais il faut les chercher...


Le fichier javascript moteur du plugin

Etudions maintenant le contenu du javascript qui va avec, helloworld.js.

Tout d'abord, initialisons l'objet editeur FCK:





var dialog = window.parent; // IE7 needs this
var oEditor = window.parent.InnerDialogLoaded();

Puis récupérons l'objet Lang:
 





var FCKLang = oEditor.FCKLang;

Pour info, car nous n'allons pas l'utiliser, donnons-nous la possibilité d'aller lire dans le fichier de configuration de FCKEditor quelques paramètres:





var FCKConfig = oEditor.FCKConfig;

De la même façon, préparons une variable nous donnant des infos sur le navigateur de l'utilisateur:





var FCKBrowserInfo = oEditor.FCKBrowserInfo;

pour le cas où nous devrions faire un traitement suivant le navigateur.

Au chargement de la page, nous exécutons cette fonction:





// ----------------------
window.onload = function()
{
  // translate the dialog box texts
  oEditor.FCKLanguageManager.TranslatePage(document);
  // remplit la zone de code:
  insert_text_TextArea();
  // Show the "Ok" button.
  dialog.SetOkButton(true);
}
// ----------------------

Ligne 4, nous remplissons nous variables avec la bonne langue.

Ensuite, le code parle de lui-même, nous allons exécuter une fonction pour remplir notre zone contenant le message, puis nous affichons le bouton OK.





// ----------------------
// action on dialogue submit
function Ok()
{
	// on prépare la possibilité d'annuler:
	oEditor.FCKUndo.SaveUndoStep();
	return true;
}
// ----------------------

Lorsqu'on clique sur le bouton OK, la fonction ci-dessus s'exécute.

La ligne surlignée permet à l'éditeur d'enregistrer les étapes précédentes dans le cas où on l'on voudrait annuler l'action.
Nous n'utiliserons pas cette possibilité, mais elle fonctionne bien.

 La fonction affichant le message est celle-ci:





// ----------------------
function insert_text_TextArea()
{
	SetE('LeMessage').value = FCKLang.Message;
}
// ----------------------

Nous fixons la valeur de l'élément LeMessage (le span contenant notre message) avec le contenu de la variable langue correspondante.

 Voilà, passons maintenant à la déclaration et au liage de notre plgin dans FCKEditor.

 


Le script fckplugin.js,  initialisateur du plugin

 Ce script permet de déclarer et initialiser notre plugin dans FCKEditor. Voici son contenu:





FCKCommands.RegisterCommand( 'Bouton_Helloworld' , 
			new FCKDialogCommand( 'Bouton_Helloworld' , 
			FCKLang.Titre , 
			FCKPlugins.Items['helloworld'].Path 
			+ 'helloworld.html', 400, 300 ) );

var oTestxavItem = new FCKToolbarButton( 'Bouton_Helloworld', FCKLang.TexteBouton ) ;
oTestxavItem.IconPath = FCKPlugins.Items['helloworld'].Path +  'helloworld.gif' ;

FCKToolbarItems.RegisterItem( 'Bouton_Helloworld', oTestxavItem ) ;

Premièrement, on enregistre la commande relative à notre bouton, avec le nom du bouton, puis la fenêtre réceptrice.

On remarque le passage du titre de cette fenêtre, et de son chemin relatif à celui des plugins FCKEditor.

Enfin, les deux nombres à la fin correspondent à la taille de la fenêtre.

Ensuite, on crée l'objet bouton, en lui passant son nom (IMPORTANT, c'est ce nom que l'on devra renseigner dans le paramètrage de la barre d'outils qui recevra ce bouton), et son texte au survol.

On lui associe son icône, toujours en chemin relatif.

On enregistre le tout dans l'objet barre d'outils. 


Installation dans l'éditeur joomlafck

Utiliser le fichier fckconfig.js ou si on en a un, notre propre fichier de configuration joomlafck (pour plus d'infos sur ce point, lire l'article JoomlaFCK - Paramétrer Personnaliser Utiliser )

Créer cette ligne:





// ----------------------
FCKConfig.Plugins.Add( 'helloworld' , 'fr' ) ;

On remarque la déclaration de la langue par défaut à utiliser.
 

Pour le premier paramètre, le respect de la casse (maj/min) est primordial, le premier paramètre doit correspondre exactement au nom du dossier qui contient le plugin, à la casse prêt.

 


Installation dans une barre d'outils 

Suivant le principe expliqué dans l'article JoomlaFCK - Personnaliser la barre d'outils, nous allons rajouter cette ligne dans le fichier
/plugins/editors/fckeditor/editor/jtoolbarsetconfig.xml :





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

Attention, là encore, le respect des Majuscules/Minuscules est primordial pour que tout fonctionne bien.

Le nom donné ici doit être exactement le même que celui donné dans le fichier fckplugin.js vu plus haut.

 


Conclusion

Voilà, normalement, arrivé ici, un joli bouton doit être ajouté quelque part sur une barre d'outils, et un click dessus doit ouvrir une fenêtre comme celle-ci:

 Fenêtre du Plugin JoomlaFCK Editor Hello World

 

Je ne pense pas que cette méthode soit la meilleure pour créer un vrai plugin complexe pour FCKEditor, mais elle fonctionne, au moins pour celui-ci, et aussi  pour un autre plugin qui va servir à formater et colorer du code javascript ou php ou autre dans les articles de Joomla créés avec JoomlaFCK.

Ah oui, j'allais oublier, les sources sont ici.