CKEditor est un éditeur HTML WYSIWYG pour vos pages web. Voila un petit mémo pour utiliser CKEditor dans vos projet WebDev.

Télécharger et installer ckeditor

1. Allez sur le site de ckeditor et téléchargez le package que vous souhaitez.
2. Décompressez l'archive dans le répertoire de votre site web (tout le répertoire ckeditor)
3. Voila, le package est installé

Déclarer le script dans vos pages

Vous devez déclarer un script dans les pages qui devront afficher l'éditeur de texte CKEditor.
Voila un bout de code qui peut être utilisé pour déclarer ckeditor.Créez une procédure globale par exemple et collez ce code.

PROCEDURE GLOBAL DeclareScriptCkEditor(Par_Page)

LOC_Script est une chaîne = ChaîneConstruit("<script src=""/1/ckeditor/ckeditor.js""></script>",RépertoireWeb())
SI Position(Par_Page..HTMLEntête,LOC_Script)=0 ALORS
        Par_Page..HTMLEntête+=LOC_Script
FIN

Dans le code de déclaration de votre page qui devra afficher l'éditeur, appelez votre procédure en lui passant le nom de la page.

DeclareScriptCkEditor(MoiMême)

Transformer un champ multi lignes 'webdev' en zone ckeditor

1. Placez une zone de texte multi lignes dans votre page WebDev
2. Appelez votre procédure DeclareScriptCkEditor dans le code d'initialisation de la page
3. Dans le code d'initialisation du champ multi-lignes, collez le code ci-dessous

LOC_HTML est une chaîne = [
        <script type="text/javascript">
        CKEDITOR.replace("",
{
        language:"fr",
}
        );
        </script>
]
MoiMême..HTMLAprès=ChaîneConstruit(LOC_HTML,MoiMême..Alias)

Récupérer le code HTML généré par CkEditor

1. Créez un bouton de validation (bouton standard 'submit')
2. Passez en code JavaScript dans la zone 'OnClick' de ce bouton
3. Saisissez le code CKEDITOR.instances.[ALIAS].updateElement() et remplacez [ALIAS] par le nom de l'alias du champ. Ce bout de code permet de mettre à jour votre champ multi-lignes original avec le code HTML de CKEditor.
4. Saisissez info([VotreChamp]) dans le code clic coté serveur (avec ou sans ajax)

Voila les principales informations à connaitre pour insérer ckeditor dans vos pages.

Testez le !

Un CKEditor dans un article créé avec CKEditor