Utiliser des templates avec CKEditor

De même que nous l'avons fait avec TinyMCE, nous allons montrer l'utilisation de l'éditeur en ligne WYSIWYG CKEditor avec des templates et la génération automatique d'un nom de fichier à partir des mots-clés contenus dans le titre de l'article.

Le template est choisi lors de la création de l'article et peut être changé en éditant un article déjà sauvé, en sélectionnant un fichier dans la liste déroulante. Vous pouvez ajouter vos propres templates dans le répertoire.

Comment cela fonctionne

Le système de base comprend une série de scripts. Cela est destiné à être développé par le webmaster selon ses besoins.
Notamment il conviendra de créer des templates différents.

• CKEditor, la dernière version de l'éditeur en ligne.
• Notre interface, qui est une page HTML intégrant CKEditor et associant des boutons aux fonctions de base.
• store.php crée un fichier pour l'article édité.
• retrieve.php retrouve le contenu d'un article dans un fichier créer avec cette interface.
• Le framework Ajax anaa.js, permet de sauver l'article sans quitter l'interface ou le travail en cours.
• titleconvert.php chargé par store.php pour créer le nom de fichier.
• Trois exemples de templates dans le sous-répertoire templates.

Utiliser un template

1. Extraire le contenu de l'archive et le mettre en ligne sur votre site ou pour le tester localement dans le répertoire www de Wamp, Xamp ou équivalent.
2. Lancer install.php pour créer un login et un mot de passe.
3. Il doit être effacé et il faut le remettre en ligne si l'on veux modifier le mot de passe.
4. Charger la page editor.php
5. Entrer un titre d'un ou plusieurs mots.
6. Choisir un template.
7. Entrer un texte, et sauvegardez le.
8. Ajouter un lien sur l'article sur votre site.

Démonstration

Pour cette démo très simple, nous utilisons seulement trois fichiers:

• demo-fr.php. La démonstration.
• pagebuild.php. Page qui affiche le résultat.
• pagedemo.txt. Le fichier qui sera créé.

Le code essentiel est le suivant

1) Inclusion de l'éditeur. Placer ce code dans la section HEAD de la page:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

2) Ajout d'un formulaire qui affiche un bouton d'envoi, pour sauver le texte:

<form action="pagebuild.php" method="post" target="_blank">
     <input type="hidden" name="page" value="demo-fr.php" >
     <input type="submit" value="Sauver le contenu">
</form>

6) Création d'une instance de l'éditeur. Le code est inséré dans le formulaire, dans le corps de la page:

<textarea cols="80" id="editor1" name="editor1" rows="10">Vide</textarea>
<script type="text/javascript">
//<![CDATA[
  var editor = CKEDITOR.replace( 'editor1' );
//]]>
</script>

Quand vous cliquez sur le bouton, le script pagebuild.php prendra le texte que vous avez tapé, qui est assigné à une variable par FCKeditor, et va le stocker dans un fichier.

Le champ dans la démonstration caché transmet l'URL de la page de l'éditeur pour que le script la recharge.

• Télécharger la démo CKEditor.

Chargez la page demo-fr.php pour éditer un texte.

L'archive contient une distribution CKEditor, l'interface et les scripts PHP, et les exemples de templates.