Tutoriel FCKEditor :
Modifier la largeur des listes déroulantes de la barre d'outils

Date de publication : 07/11/2007

Par Thierry Godin (Voir les autres articles)

Ce tutoriel a pour objectif de vous montrer comment modifier la largeur des listes déroulantes de la barre d'outils de FCKEditor. Le sujet traité ici concernera la liste déroulante "Style", mais nous verrons plus loin que cette procédure peut également s'appliquer aux autres listes déroulantes de la barre d'outils.

Version PDF (Miroir) Version hors-ligne (Miroir)

Introduction
II. Définitions
III. Quelques notions de base de FCKEditor
IV. Paramètres par défaut
V. Modifier la largeur de la ComboList "Style" et de son Panel (fichiers sources)
VI. Modifier la largeur de la ComboList "Style" et de son Panel (fichiers d'exécution)
VII. Modifier les autres listes déroulantes
VIII. Liens
IX. Remerciements

Introduction

FCKEditor est un éditeur (WYSIWYG) de texte enrichi en ligne pour l'Internet.

Après avoir longtemps cherché sur le forum de FCKEditor ou dans les moteurs de recherche, je n'avais pas trouvé la solution qui permettait de modifier la largeur de la liste déroulante des styles CSS de la barre d'outils ainsi que du menu contextuel qui s'affiche lorsqu''on clique sur la liste.

Pour les besoins du site que je suis en train de créer, je souhaite que mon client puisse sélectionner un style CSS lorsqu''il édite un article depuis le Back-office du site. Pour cela, je souhaite que le nom du style affiché soit explicite.

Par exemple :

"Titre article revue de presse régionale", ce qui correspondra au style "titre-rp-region" qui est défini dans le fichier de styles du site mais qui est beaucoup moins "parlant" pour l'utilisateur final qui est le plus souvent peu habitué au charabia des développeurs.

Avant de modifier vos fichiers, pensez à sauvegarder une version stable de FCKEditor.

II. Définitions

Dans cet article, la liste déroulante sera appelée "ComboList", le menu contextuel qui apparaît (en fait, un calque DIV) sera appelé "Panel", le répertoire d'installation de FCKEditor sera appelé "/FCK/".

La version de FCKEditor utilisée ici :2.4.3

III. Quelques notions de base de FCKEditor

Dans FCKEditor la largeur des listes déroulantes (ComboList) est par défaut de 100px, la largeur du menu contextuel (Panel) est de 150px.

Or, les styles CSS sont appliqués seulement au Panel, ce qui fait que si vous utilisez un style avec une police de taille importante (font-size:24px), il est probable que vous ne voyiez apparaître seulement qu'une partie du nom du style.

Pour info, le style interne appliqué aux items de la ComboList est .SC_Item qui contient les attributs "text-overflow:ellipsis; et "overflow:hidden;" ce qui masque le texte s'il est trop long.

Ainsi, dans le cas du site de mon client, les noms des styles apparaissaient comme ceci :

Titre article revue de p(...) pour le style "Titre article revue de presse régionale"
Titre article revue de p(...) pour le style "Titre article revue de presse européenne"
Titre article revue de p(...) pour le style "Titre article revue de presse internationale"

Ce qui est parfaitement incompréhensible pour l'utilisateur final, vous en conviendrez.

Ceci implique que vous ayez créé votre fichier de style CSS ainsi que le fichier XML qui permet de charger les styles dans la liste déroulante
(Voir la Doc FCKEditor pour ces fonctions)

IV. Paramètres par défaut

La largeur de la ComboList et du Panel qui apparait lorsqu'on déroule la liste sont définis par défaut dans le fichier fckspecialcombo.js situé ici :

/FCK/editor/_source/classes/fckspecialcombo.js

Ouvrez le fichier puis cherchez la fonction ci-dessous :

fckspecialcombo.js


var FCKSpecialCombo = function( caption, fieldWidth, panelWidth, panelMaxHeight, parentWindow )
{
// Default properties values.
this.FieldWidth = fieldWidth || 100 ; // largeur de la liste
this.PanelWidth = panelWidth || 150 ; // largeur du panel
this.PanelMaxHeight = panelMaxHeight || 150 ; // hauteur maxi du panel
-
-
-
-
}

On voit ici que l'on peut passer plusieurs paramètres à la fonction FCKSpecialCombo :
caption, fieldWidth, panelWidth, panelMaxHeight et parentWindow .

Les paramètres en gras ici sont ceux qui nous intéressent.
Si ces paramètres ne sont pas définis, une valeur par défaut leur sera attribuée.

Il n'est pas intéressant de modifier les largeurs par défaut directement dans ce fichier car cela s'appliquerait à toutes les ComboLists et leurs Panels
et une largeur de 300 pixels pour la ComboList et du Panel des tailles de polices serait un peu exagérée, voire complètement inutile.

V. Modifier la largeur de la ComboList "Style" et de son Panel (fichiers sources)

Pour modifier la largeur de la ComboList "Style" et de son Panel, ouvrez le fichier fcktoolbarstylecombo.js situé ici :

/FCK/editor/_source/classes/fcktoolbarstylecombo.js

Rajoutez les deux dernières lignes comme ci-dessous après la fonction FCKToolbarStyleCombo.prototype.GetLabel :

fcktoolbarstylecombo.js


// début du code
var FCKToolbarStyleCombo = function( tooltip, style )
{
this.CommandName = 'Style' ;
this.Label = this.GetLabel() ;
this.Tooltip = tooltip ? tooltip : this.Label ;
this.Style = style ? style : FCK_TOOLBARITEM_ICONTEXT ;
}
// Inherit from FCKToolbarSpecialCombo.
FCKToolbarStyleCombo.prototype = new FCKToolbarSpecialCombo ;
 
FCKToolbarStyleCombo.prototype.GetLabel = function()
{
return FCKLang.Style ;
}
//rajouter les lignes ci-dessous
FCKToolbarStyleCombo.prototype.PanelWidth = 350; // ici on définit la largeur du Panel
FCKToolbarStyleCombo.prototype.FieldWidth = 200; // ici on définit la largeur de la ComboList
 -
 -
 -

Puis sauvegardez le fichier.

J'ai mis 200 pour la ComboList et 350 pour le Panel car le style sera appliqué seulement au Panel, les noms des styles affichés dans la ComboList
utilisent la police par défaut sans style. Ils seront donc moins larges. Vous mettrez évidemment les largeurs qui vous seront nécessaires.

Cette opération a seulement modifié les fichiers sources du programme, il faut ensuite reporter ces modifications dans les fichiers d'exécution

VI. Modifier la largeur de la ComboList "Style" et de son Panel (fichiers d'exécution)

Il existe deux fichiers d'exécution qui ne sont en fait que des fichiers qui reprennent toutes les fonctions JavaScript de FCKEditor écrites à la suite, sans espaces et sans commentaires. Ils sont ainsi compressés et permettent un chargement plus rapide.

Les deux fichiers à modifier sont : fckeditorcode_gecko.js et fckeditorcode_ie.js . Ils se trouvent ici :

/FCK/editor/js/fckeditorcode_gecko.js // pour les navigateurs utilisant Gecko
/FCK/editor/js/fckeditorcode_ie.js // Pour Internet Explorer

Recherchez la phrase "var FCKToolbarStyleCombo=function(A,B){"

Puis, juste après le texte :

fckeditorcode_gecko.js + fckeditorcode_ie.js


FCKToolbarStyleCombo.prototype.GetLabel=function(){return FCKLang.Style;};

Rajoutez le texte :

fckeditorcode_gecko.js + fckeditorcode_ie.js


FCKToolbarStyleCombo.prototype.PanelWidth=350;FCKToolbarStyleCombo.prototype.FieldWidth=200;

Puis sauvegardez les deux fichiers

Ce qui donnera ceci :
Résultat de la modification de la liste déroulante Style

IMPORTANT
Si les modifications n'apparaissent pas immédiatement, pensez à vider le cache de votre navigateur.

VII. Modifier les autres listes déroulantes

On peut modifier les autres listes déroulantes de la barre d'outils de FCKEditor en suivant la même procédure

Les fichiers sources à modifier :

/FCK/editor/_source/classes/fcktoolbarfontformatcombo.js // liste des formats
/FCK/editor/_source/classes/fcktoolbarfontscombo.js // liste des polices
/FCK/editor/_source/classes/fcktoolbarfontsizecombo.js // liste des tailles de polices

Les fichiers d'exécution à modifier :

/FCK/editor/js/fckeditorcode_gecko.js // pour les navigateurs utilisant Gecko
/FCK/editor/js/fckeditorcode_ie.js // Pour Internet Explorer

VIII. Liens

Le forum spécial FCKEditor sur developpez.net

Le site officiel de FCKEditor

IX. Remerciements

Remerciements à RideKick pour la relecture de cet article.