Par absurdsystem le 22 décembre 2009

[CKEditor] La barre d'outils

barre
Dans cette deuxième partie nous allons voir comment personnaliser sa barre d'outils.

Tout d'abord un peu de documentation.
Pour CKEditor et FCKEditor.

Vous constaterez qu'il n'y a pas de différences dans le choix des différents outils.
Pour l'instant nous allons créer les outils, nous verrons ensuite la mise en place de la barre d'outils.

Creation des outils

Un peu d'explication.
Chaque outils s'écrit entre guillemets ' '.
Les outils peuvent être organisés par section, il suffit pour cela de les placer entre crochets  » [ ] « .

['Source']

Dans les sections vous pouvez séparer les outils par un tiret  » – « .

['Source','-','DocProps']

Vous pouvez aussi organiser les outils par ligne en utilisant le signe  » /  »

['Source','-','DocProps'], '/', ['Bold','Italic']

Voila vous avez tout pour faire votre propre barre d'outils.
Pour connaitre les différents outils disponibles, inspirez vous des barres d'outils « Full » pour CKEditor et « Default » pour FCKEditor.
Elles contiennent tous les outils disponibles.

Mise en place

Pour FCKEditor tout se passe dans le fichier fckconfig.js.
Recherchez les lignes concernant les barres d'outils ( FCKConfig.ToolbarSets…)

Vous trouverez les 2 barres existantes, à savoir la « Basic » et la « Default ».

Rajoutez par exemple à la suite :

FCKConfig.ToolbarSets["MyToolbar"] = [ ['Bold','Underline'],'/',
['Cut','Copy','Paste'],'/',['Image','Flash','Smiley'],'/',['About']];

Ici ma barre d'outils se nomme « MyToolbar ».

Votre barre est maintenant définie, il ne reste plus qu'à y faire appel en spécifiant bien le bon nom ( ici « MyToolbar »).
(Voir article de configuration )

Voir l'exemple

Pour CKEditor c'est la même chose. Le code de la barre est identique.
Il faut maintenant définir votre barre dans CKEditor.
Pour cela, ouvrez le fichier de configuration (config.js) qui se trouve dans le dossier de CKEditor.

Voici le code de la barre :

config.toolbar = 'MyToolbar';

    config.toolbar_MyToolbar =
    [
        ['Bold','Underline'],'/',
	['Cut','Copy','Paste'],'/',
	['Image','Flash','Smiley'],'/',
	['About']
    ];

Maintenant il faut l'appeller dans votre fichier avec le bon nom ( ici « MyToolbar »).
(Voir article de configuration )
Voir l'exemple

A venir

Utilitaire pour la création de la barre d'outils

zp8497586rq

    1 commentaire

  1. Matthieu dit :

    Merci beaucoup pour cet article ! Je galérais avec la doc en anglais… et tombé par hasard sur cette page, cela m’a été d’un grand secours )