Ajouter la coloration syntaxique à l'éditeur WYSIWYG FCKeditor

Ajouté le 07 Apr 2008

Tags: PHP

Dans l'article précédent, nous avions vu comment intégrer l'éditeur WYSIWYG FCKeditor. Malgré sa grande variété de fonctionnalités, FCKeditor n'offre pas la coloration syntaxique, soit la capacité de formater chacun des éléments d'un code source. Le but de la coloration syntaxique est d’améliorer la lisibilité d'un code source en mettant en évidence les structures syntaxiques de son langage de programmation.

Geshi Pro

Geshi Pro est un plugin de FCKeditor qui permet le support de Geshi ; Geshi est une librairie PHP permettant la coloration syntaxique et qui supporte une multitude de langages de programmation.

Installation

Télécharger l'archive contenant Geshi Pro à cette adresse.
Extraire le contenu de l'archive dans le répertoire de FCKeditor contenant les plugins (habituellement 'editor/plugins/')

Remarque: Le repertoire plugins devrait désormais contenir un répertoire geshipro.

Configuration de FCKeditor

La prochaine étape consiste à charger le plugin dans FCKeditor. Cela se fait en modifiant le très populaire fichier de configuration fckconfig.js. Pour ce fait, nous allons y ajouter l'instruction ci-dessous avant la ligne contenant 'FCKConfig.AutoGrowMax = 400' (ligne 52 dans mon cas).

  1.  
  2. FCKConfig.Plugins.Add( 'geshipro', 'en' ) ;
  3.  


La dernière étape consiste à ajouter le bouton permettant d'utiliser Geshi Pro dans notre barre d'outils personnalisée. Si vous vous êtes basé sur l'article précédent, le code pour votre barre d'outils devrait ressembler à celui ci-dessous.

  1.  
  2. FCKConfig.ToolbarSets["Exemple"] = [ ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','Smiley','GeSHiPro'] ] ;
  3.  


Remarque: 'GeSHiPro' à été ajouté dans la liste.

Voici donc tout ce qu'il fallait pour ajouter la coloration syntaxique à notre éditeur WYSIWYG FCKeditor. Les images associées à cet article montre notre le plugin en action.

Bonne configuration !