FCKFormatCode installation du plugin de formatage de code

Mise à jour le Mercredi, 24 Juin 2009 23:25 Écrit par Tr@nquille Mercredi, 17 Juin 2009 09:20

Attention, ouverture dans une nouvelle fenêtre.
553 lecteurs

Installation du plugin FCKFomatCode

le plugin FormatCode que j'ai développé pour Joomla 1.5, en m'appuyant sur divers plugins existants, est constitué de deux parties:

un plugin Joomla
un plugin pour JoomlaFCK

A quoi sert-il?

Ce plugin sert à insérer des portions de code javascript, html, php ou autres dans des articles Joomla 1.5.

Il va encadrer ces morceaux de code dans une balise pre, et la formater pour avoir une coloration syntaxique en fonction du langage choisi.

D'autres options sont proposées,expliquées dans cet article.

Installation de la partie plugin Joomla

Pour colorer et formater les portions de code, il faut un procédé qui repère ces portions. C'est le rôle de ce premier plugin.

Il est téléchargeable ici

Téléchargez ce plugin sur votre poste de travail local dans un dossier temporaire (selon l'organisation de vos téléchargements)

Ne le dézippez pas.

L'installation se fait via l'interface d'administration de Joomla, menu Extensions, option Installer/Désinstaller.

Dans le cadre "Archive à transférer", cliquez sur le bouton "Choisir" pour ouvrir une fenêtre de parcours de fichiers, puis allez chercher et sélectionner le formatcode.zip téléchargé précédemment. Cliquez sur le bouton ouvrir, vous revenez du coup sur l'interface d'administration Joomla1.5 avec le nom du fichier choisi.

Cliquez sur le bouton "Transfert de fichier et installation", et après un court instant, le message de succès de l'installation s'affiche.

Activer le plugin formatcode pour Joomla:

Allez maintenant dans le menu extensions, option Gestion des plugins.

Recherchez dans la liste affichée le plugin 'formatcode', cliquez dessus pour l'ouvrir, puis activez-le via l'option qui va bien, et sauvez.

Et d'un!

Installation du plugin pour l'éditeur JoomlaFCK

La gestion de l'insertion des portions de code dans les articles se fait à travers l'éditeur JoomlaFCK.
Pour le moment, je n'ai rien regardé en ce qui concerne un autre éditeur très utilisé, JCE, on verra peut-être plus tard...

Il faut donc installer la seconde partie du plugin dans joomlaFCK.

Pour ce faire, téléchargez-le ici.

L'installation se déroule en plusieurs étapes.

déchargement du plugin sur le site
activation du bouton dans la barre d'outils JoomlaFCK
activation du plugin dans l'éditeur

Déchargement (upload) du plugin sur le site

Tout d'abord, téléchargez le plugin zippé, dans un répertoire temporaire vide de votre choix sur votre poste de travail.

Ensuite dézippez-le, il va créer un dossier fckformatcode (respectez les minuscules) contenant l'arborescence nécessaire.

Puis envoyez via votre méthode favorite (en général via FTP et un logiciel client ftp genre filezilla) le dossier fckformatcode créé (sans le fichier zip d'origine) dans le dossier suivant sur votre site Joomla 1.5:

/plugins/editors/fckeditor/editor/plugins

Vous devez vous retrouver avec un sous-dossier fckformatcode dans le dossier cité juste au dessus, qui lui-même contient l'arborescence nécessaire, comme ceci:

Arborescence plugin pour joomlafck fckformatcode

activation du bouton dans la barre d'outils JoomlaFCK

Pour intégrer un bouton dans la barre d'outils JoomlaFCK, il ne suffit pas de suivre le tuto fourni sur le site de FCKEditor.

Comme je l'ai présenté dans l'article JoomlaFCK - Personnaliser la barre d'outils , il faut aller modifier le fichier:

/plugins/editors/fckeditor/editor/jtoolbarsetconfig.xml

Dans celui-ci, repérer la partie concernant la barre d'outils JoomlaFCK que l'on utilise et rajouter le bouton comme ceci:

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

dans le groupe de boutons que l'on souhaite, ou en créant un autre groupe de boutons pourquoi pas.

Ensuite, rajouter cette ligne à la fin du fichier:

<add name="fckformatcode" lang="fr"/>

Pour bien maitriser cette partie, il faut lire l'article JoomlaFCK - Personnaliser la barre d'outils.

activation du plugin dans l'éditeur

Enfin, nous allons déclarer et activer le plugin dans le fichier de configuration de l'éditeur JoomlaFCK.

Deux solutions s'offrent à nous selon la façon dont nous gérons cette configuration

soit nous utilisons le fichier de configuration par défaut de JoomlaFCK
soit nous avons créé et lié à joomlaFCK notre propre fichier de configuration.

Pour vous aider dans votre choix, vous pouvez aller consulter l'article JoomlaFCK - Paramétrer Personnaliser Utiliser .

Que ce soit dans l'un des fichiers ou dans l'autre, le principe est exactement le même, à savoir rajouter cette ligne:

FCKConfig.Plugins.Add( 'fckformatcode' , 'fr' ) ;

C'est elle qui relie le plugin à l'éditeur.

Le second paramètre indique quel fichier langue utiliser par défaut.
Pour le moment ce plugin n'a qu'un seul fichier de langue... fr.

Paramètrages par défaut

Ce plgin FCKFormatCode peut être paramétré par défaut, de sorte que lorsque la fenêtre de gestion du code s'ouvre, certaines options sont déjà paramétrées.

Ces options se fixent dans le fichier de configuration de joomlaFCK, comme ci-dessus l'initialisation.

Le mieux, évidemment, est de mettre les paramètres tout de suite après la déclaration.

Voici la liste des paramètres:

// paramètres par défaut:
// langages acceptés: 
/*  shell,c,cpp,csharp,css,delphi,html,java,js,
 * perl,php,powershell,python,rails,ruby,sql,
 * text,vb,vbnet,xml,xhtml
 */
FCKConfig.fckf_defaut_Langage = 'js'; // défaut: rien
FCKConfig.fckf_defaut_BarreOutils = true; // défaut: false
//FCKConfig.fckf_defaut_Collapse = false; // défaut: false
//FCKConfig.fckf_defaut_Regle = false; // défaut: false
FCKConfig.fckf_defaut_Indentation = '2'; // défaut: 4
//FCKConfig.fckf_defaut_RetourLigne = true; // défaut: true
//FCKConfig.fckf_defaut_HtmlScript = false; // défaut: false
//FCKConfig.fckf_defaut_MasquerNumerotation = false; // défaut: false
//FCKConfig.fckf_defaut_DebutNum = ''; // défaut: 1
// ----------------------

d'abord en commentaire une liste des langages acceptés, sous forme de codes à respecter impérativement pour que le plugin fasse ses effets.

Ensuite, chaque paramètre est personnalisable.

Si on omet un paramètre ici, sa valeur par défaut est prise automatiquement.
Ceci explique le nombre de lignes en commentaires, pour prendre les paramètres par défaut automatiquement.

Pour le début de la numérotation des lignes, par exemple, enlèver le paramètre ici ou le mettre à '' (chaine vide) correspond à choisir de commencer à numéroter à 1.

La commande de formatage générée dans ce cas-là ne contiendra pas ce paramètre du coup, puisque l'option est par défaut.

Faut-il que j'explique chacun des paramètres?

Le langage est le langage pour lequel on souhaite formater le code. On pourra se référer à l'article Mettre des exemples de code dans un article Le retour pour avoir une idée plus précise de son fonctionnement.

Barre d'outil: lorsqu'on formate le code avec ce plugin, une barre d'outil apparait lorsqu'on survole ce code à la souris.
Elle permet de copier le code source dans le buffer, de l'imprimer ou de le voir.
Flash doit être actif dans le navigateur pour qu'elle fonctionne.
Attention au piège, l'intitulé aurait du être: masquer la barre d'outil, true pour oui et false pour non, avec en défaut non, donc false.
Je referai cette option lorsque j'aurai une autre mise à jour à faire pour ce plugin, en attendant...

Collapse permet à l'ouverture de l'article d'avoir le code condensé, et juste une ligne visible permettant de l'expandre. Flash doit être actif aussi.

La règle est une règle qui se positionne en haut du code pour repérer les colonnes du code.

Avec Indentation, on paramètre le nombre d'espaces qui serviront à indenter le code source.

RetourLigne permet de dire au plugin s'il doit couper les lignes trop longues ou non.

HtmlScript est un paramètre lié au langage utilisé. Lorsqu'on mixe du php et de l'html, ou du javascript et du html, le plugin est capable de colorer correctement l'ensemble si ce paramètre est à true.

On peut masquer la numérotation des lignes qui se positionne à gauche.

Et on peut préciser par quelle valeur on souhaite commencer cette numérotation, qui par défaut commence à 1.

Conclusion

Voilà, l'installation et les paramétrages sont terminés, il ne reste plus qu'à l'utiliser.

Et pour avoir un début d'idée de ses possibilités, n'hésitez pas à consulter l'article Mettre des exemples de code dans un article Le retour.