1) Installation de FckEditor - Sauvegarde du Patrimoine de Barriac

Installation de FckEditor dans un projet
WebDev
© www.ogi.fr
1) Installation de FckEditor
Télécharger la dernière version de FckEditor ici : http://www.fckeditor.net/download
La dézipper dans le répertoire d’installation du serveur (apache & easyphp = C:/EasyPhp/www, IIS =
C:/InetPub/wwwroot)
On doit avoir un dossier de ce nom : FckEditor
On peut changer la langue par défaut ou modifier la barre d’outils de l’éditeur à partir du fichier :
fckconfig.js
1.1) Rajouter une barre d'outils Webdev
Ouvrir le fichier fckconfig.js.
Chercher l'emplacement où sont redéfinis les FCKConfig.ToolbarSets
Puis rajouter celle ci :
FCKConfig.ToolbarSets["WebDev"] = [
['Source','-','Preview'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print'],
['Undo','Redo'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink'],
['FontName','FontSize'],
['TextColor','BGColor']
] ;
2) Dans mon projet Webdev
Je créer un fichier votre.ini dans le répertoire MonProjet/Exe/ et je le remplie de cette façon :
[FCKEDITOR]
PATH=http://localhost/Fckeditor/
Ensuite, dans le code d’initialisation du projet, on met ce bout de code :
// Initialisation de FCKEDITOR l'éditeur HTML WYSIWYG
PATH est une chaîne
PATH=INILit("FCKEDITOR","PATH","",ComplèteRep(fRepEnCours)+"votre.ini")
SI PATH = ""
ALORS
Erreur("Une erreur de chargement de FckEditor est
survenue. Impossible de lire le fichier votre.ini")
//PATH="http://localhost/Fckeditor/"
Ensuite, dans l’onglet « Avancée » puis HTML de la description de la page (page où sera insérée
FckEditor) on met se code :
<script type="text/javascript" src="[%PATH%]fckeditor.js"></script>
C’est fini pour le paramétrage, on enchaîne maintenant sur la création des champs Webdev et de
leurs interactions.
2.1) 1ère méthode (la moins bien car on ne peut pas modifier la
taille du FckEditor)
Deux champs sont à créer :
• Un champs de saisie
pour sauvegarder la variable PATH (pour pouvoir faire des
passages entre le code serveur et le code navigateur) On nommera ce champs :
ePATH
• Un champs de saisie texte qui sera remplacé par le FckEditor. On nommera ce
champs : CH
Dans le code d'initialisation du projet on met ce code :
// Cette ligne va permettre de tester si l'éditeur marche bien. "départ et
la suite" devront être en rouge.
CH="Texte de <font color=""#ff0000"">départ et la
suite</font>"
// Cette ligne va permettre de sauvegarder le PATH dans le champ de saisie
pour pouvoir dialoguer avec le code navigateur
ePATH=PATH
Dans le code de chargement (onload) de la page (code navigateur) :
OuvreEditeur(CH..Alias,ePATH)
La fonction OuvreEditeur, en code navigateur Global et Javascript ! Il suffit de cliquer sur WL à
gauche de Procédure Globale dans Webdev :
function OuvreEditeur(pnomChamp,pPath) {
var oFCKeditor = new FCKeditor(pnomChamp);
oFCKeditor.BasePath = pPath ;
oFCKeditor.ToolbarSet = "Basic" ;
oFCKeditor.ReplaceTextarea();
}
2.2) 2ième méthode (MAJ)
2.2.1) Initialisation à vide du champ FckEditor
Un seul champ est à créer :
C'est un champ HTML que l'on nommera Html1. Dans le code d'initialisation du champ, on insérera ce
code :
Html1 = InitChampFckEditor("html1",PATH)
Avec la Procédure Globale :
InitChampFckEditor :
// Résumé : Initialise le champ FckEditor
// Syntaxe :
//[ <Résultat> = ] InitChampFckEditor (<ChampHTML>, <ePATH> [, <Modif> [,
<Contenu>]])
//
// Paramètres :
//
ChampHTML : Le champ HTML qui va supporter FckEditor (indispensable
pour récupérer la largeur et la hauteur)
//
ePATH : Le PATH de FckEditor
//
Modif (valeur par défaut=0) : si 1 alors le champs est initialisé avec
un contenu, 0 le champ est initialisé a vide
//
Contenu (valeur par défaut="") : le contenu qui va initialisé le
champ
// Valeur de retour :
//
Type indéterminé : //
Aucune
//
// Exemple :
// Indiquez ici un exemple d'utilisation.
//
PROCEDURE InitChampFckEditor(ChampHTML, ePATH,Modif=0,Contenu = "")
SI Modif = 0 ALORS
RENVOYER ""+...
"<script type=""text/javascript"">" +...
RC+"var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;" +...
RC+"oFCKeditor.BasePath = """+ePATH+""" ;" +...
RC+"oFCKeditor.ToolbarSet = ""WebDev"""+";" +...
RC+"oFCKeditor.Width = "+{ChampHTML,indChamp}..Largeur+";" +...
RC+"oFCKeditor.Height = "+{ChampHTML,indChamp}..Hauteur+";" +...
RC+"oFCKeditor.Create() ;" +...
RC+"</script>"
SINON
RENVOYER ""+...
"<script type=""text/javascript"">" +...
RC+"var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;" +...
RC+"oFCKeditor.BasePath = """+ePATH+""" ;" +...
RC+"oFCKeditor.ToolbarSet = ""WebDev"""+";" +...
RC+"oFCKeditor.Width = "+{ChampHTML,indChamp}..Largeur+";" +...
RC+"oFCKeditor.Height = "+{ChampHTML,indChamp}..Hauteur+";" +...
RC+"oFCKeditor.Value = '"+FckEditorRemplace(Contenu)+"' ;"+...
RC+"oFCKeditor.Create() ;" +...
RC+"</script>"
FIN
Et une autre procédure globale :
FckEditorRemplace
// Résumé : Remplace les ' par des \' et les saut de ligne RC par des espaces
// Syntaxe :
//FckEditorRemplace (<contenu>)
//
// Paramètres :
//
contenu : <indiquez ici le rôle de contenu>
// Valeur de retour :
//
Aucune
//
// Exemple :
// Indiquez ici un exemple d'utilisation.
//
PROCEDURE FckEditorRemplace(contenu)
RENVOYER Remplace(Remplace(contenu,"'","\'"),RC,"")
Petite impression d'écran pour voir le résultat :
2.2.2) Initialisation avecune valeur du champ FckEditor
Voici maintenant un exemple d'utilisation quand l'on veut initialiser le champ FckEditor avec une
valeur (par exemple, pour modifier une facture, on récupère les données dans la BD et on l'affecte au
champ Html1) :
Html1 = InitChampFckEditor("html1",PATH,1,gsMonProduit)
"html1" est le champ HTML à modifier, PATH voir plus haut, 1 signifie que l'on est dans le mode
modif de InitChampFckEditor et enfin, gsMonProduit c'est le texte qui va initialiser le champ
FckEditor.
Deuxième impression d'écran avec FckEditor initialisé :
2.2.3) Récupération de la valeur du champ FckEditor
Pour récupérer la source de ce que contient le champ
FckEditor, il faut mettre dans le code d'un bouton
ou lien :
sRenvoi est une chaîne =PageParamètre("FCKeditor1")