Table des matières

Intégration de FCKeditor

Nous apprendrons ici comment intégrer l'éditeur javascript FCKeditor dans Jelix.

Pour faciliter l'intégration tout le code sera fourni.

Ce tutoriel n'est pas destiné à décrire le “comment configurer FCKeditor”. Nous faisons allusion à la configuration de la gestion de fichiers, d'images ou de ressources flash ou autres. Ou comment alléger le code de FCKeditor. Pour ces informations je vous recommande la documentation anglaise de FCKeditor.

Pré-requis

Vous devez avoir fait le Mini Tutoriel et le Tutoriel principal ou être à l'aise avec Jelix. Nous utiliserons le même type d'installation que celle du Mini Tutoriel.

Dans un premier temps on crée une application.

Après vous être positionné dans le répertoire lib/jelix-scripts/ vous devez créer une nouvelle application nommé tutorfck et un module nommé tutorfck en utilisant les commandes : 

  php jelix.php --tutorfck createapp

Votre fichier de configuration defaultconfig.ini.php devrait avoir les valeurs suivantes: 

  startModule = "tutorfck"
  startAction = "default:index"
 
  [urlengine]
  engine        = simple
  multiview     = off

Installation de FCKeditor

Téléchargez le logiciel FCKeditor Décompressez l'archive dans le répertoire /jelix/tutorfck/www/

Création du plugin de template

  <?php
  require_once (JELIX_APP_WWW_PATH.'fckeditor/fckeditor.php');
 
  function jtpl_function_html_fckeditor( $tpl, $contenu="aucun contenu" ) {
    $oFCKeditor = new FCKeditor('FCKeditor1') ;
    $oFCKeditor->BasePath = $GLOBALS['gJConfig']->urlengine['basePath'] .'fckeditor/';    
    $oFCKeditor->Value = $contenu;
    $oFCKeditor->Create();							
  }
  ?>

Pour en savoir plus sur les templates lisez l'article "Le moteur de template jTpl" et sa section “Les plugins de templates”.

Création du template

Créez un template demofck.tpl dans jelix/tutorfck/modules/tutorfck/templates/ 

  <p>Intégration de FCKeditor module : tutorfck</p>
 
  <form action="{formurl 'tutorfck~default:index'}" method="post">
  <div>{formurlparam 'tutorfck~default:index'}</div>
  <div>  {fckeditor $mytext} </div>
  <div> <input type="submit" value="Submit" /></div>
  </form>

La variable $mytext est initialisée par le contrôleur et son contenu sera affiché dans l'éditeur javascript. Vous pourrez récupérer le contenu ou ajouter un contenu dans FCKeditor par le biais du contrôleur. Ou directement dans l'éditeur. C'est le but.

Modification de l'action par défaut (le controleur)

Ouvrez le fichier /jelix/tutorfck/modules/tutorfck/controllers/default.classic.php

Ajouter le code suivant après la ligne $rep = $this→getResponse('html'); 

  $rep->bodyTpl = 'demofck';
 
  if ($this->param('FCKeditor1')) {
    $mytext = "Vous avez modifié le contenu de FCKeditor<br />" . $this->param('FCKeditor1');
  } else {
    $mytext = "Démonstration de FCKeditor:<br />On est dans l'action par défaut";
  }
 
  $rep->body->assign('mytext', $mytext);

Comment appeler la page de démonstration de FCKeditor?

Dans la barre d'adresse : 

http://localhost/jelix/tutorfck/www/index.php?module=tutorfck&action=default:index

Dans un template : 

{jurl 'tutorfck~default:index'}