Créer sa propre barre de mise en forme dans FCKEditor

Un article de Wiki Maximus CMS.

Sommaire 1 Présentation 2 Les fichiers à editer 3 Vue code de la barre "Default" 4 Composant de Ma_Barre 5 Création de ma barre 6 Mise en place de ma barre 7 Attention

Présentation

FCKEditor est muni de deux sorte de barre pour réaliser vos mises en forme de texte. -La barre "default" notement utilisée pour les administrateurs -La barre "Basic" conseillée vivement pour la partie client (vos membres) Ici nous allons vous donner une 3eme solution, c est de créer votre barre en restant très vigilant

Les fichiers à editer

FCKEditor/fckconfig.js et pour exemple d 'utilisation modules/Submit_news/index.php

Vue code de la barre "Default"

Nous allons voir le code cette barre car nous en auront besoin pour récuperer les variantes que nous allons placer sur notre barre.

FCKConfig.ToolbarSets["Default"] = [
	['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
	['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
	'/',
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink','Anchor'],
	['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
	'/',
	['Style','FontFormat','FontName','FontSize'],
	['TextColor','BGColor'],
	['FitWindow','-','About']
] ;

Vous voyez directement que la barre est "Default" on l appel via le code

FCKConfig.ToolbarSets["Default"]

Donc imaginons que notre barre se "Ma_Barre" nous allons modifier comme ceci

FCKConfig.ToolbarSets["Ma_Barre"]

Composant de Ma_Barre

Je veux dans ma barre: un text gras = 'Bold' un text italic ='Italic' une séparation ='-' un text souligné = 'Underline' Modifier la taille de mon text = 'FontSize' coloriser mon text = 'TextColor' Aligner mon text à droite, gauche, centre ='JustifyRight','JustifyLeft','JustifyCenter' Ajouter une image via un lien externe = 'Image' Ajouter des smileys = 'Smiley'

Création de ma barre

on ouvre le code avec un [ on ouvre la barre avec un [ on ferme la barre avec un ] on ferme le code avec un ]

FCKConfig.ToolbarSets["Ma_Barre"]=[
['Bold','Underline','Italic','-','FontSize','TextColor','JustifyLeft','JustifyCenter','JustifyRight','Image','Smiley']
];

Voilà ma barre est maintenant créée, vous avez remarquer qu après la fermeture du code ], j ai mis un ";" c est important de le mettre sinon la suite du code js ne sera pas executer donc on termine par ];
On doit maintenant la placer dans le fichier fckconfig.js comme ceci

FCKConfig.ToolbarSets["Default"] = [
	['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
	['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
	'/',
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink','Anchor'],
	['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
	'/',
	['Style','FontFormat','FontName','FontSize'],
	['TextColor','BGColor'],
	['FitWindow','-','About']
] ;

FCKConfig.ToolbarSets["Basic"] = [
	['Bold','Italic','Underline','-','Smiley','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

FCKConfig.ToolbarSets ["MyToolbar"] = [
['Bold','Underline','Italic','-','FontSize','TextColor','JustifyLeft','JustifyCenter','JustifyRight','ImageButton','Smiley']
];

Enregistrer le fichier au bon endroit

Mise en place de ma barre

Ouvre votre index.php se situant dans modules/Submit_news/index.php repèrer le code d appel du FCK

if ( $wysiwyg == 'fck' ) {
// Editor Start
$oFCKeditor = new FCKeditor(story) ;
$oFCKeditor->ToolbarSet = 'Basic';
$oFCKeditor->InstanceName = "story" ;
$oFCKeditor->Create() ;

A $oFCKeditor->ToolbarSet = 'Basic'; remplacer par $oFCKeditor->ToolbarSet = 'Ma_Barre'; enregisrer les fichier, placer les sur votre host au bon endroit et voyons ce que ça donne.

Attention

Une fois les modifications réalisées, avant de tester votre barre penser à vider le cache de votre naviguateur et de vos modules, sinon vous aurez une erreur, (erreur la barre "Ma_Barre",n existe pas)

--Thierry 31 mar 2007 à 13:42 (CEST)