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

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

Ce tutoriel n'est pas destiné à décrire le “comment configurer TinyMCE”. Pour obtenir ces informations je vous recommande de consulter le wiki de TinyMCE.

Enfin, ce tutoriel est basé sur le tutoriel Intégration de FCKeditor.

Vous devez avoir fait le Mini Tutoriel et le Tutoriel principal et/ou être à l'aise avec Jelix.

Dans un premier temps on crée une application et un module.

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

  php jelix.php --tutoriel.tinymce createapp -nodefaultmodule
  php jelix.php --tutoriel.tinymce createmodule essai

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

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

Téléchargez le logiciel TinyMCE.

Dans votre application, créez un répertoire contenant l'ensemble des bibliothèques Javascript histoire d'être ordonné ! Nommez-le js et ajoutez-le dans le répertoire /tutoriel.tinymce/www/. Ajoutez-y maintenant le répertoire destiné à accueillir TinyMce : tinymce

Décompressez l'archive et recherchez le répertoire contenant les sources Javascript. Par exemple, pour la version sur laquelle je me base pour la rédaction de ce tutoriel le chemin est : tinymce/jscripts/tiny_mce/

Copiez le contenu de ce répertoire dans le répertoire /tutoriel.tinymce/www/js/tinymce/ précédemment créé.

• Dans le répertoire /tutoriel.tinymce/plugins/ créez le répertoire tpl/html.
• Dans ce répertoire, créez un fichier nommé cfunction.tinymce.php .

Copiez-collez le code suivant :

<?php
 
/**
 * cfunction plugin :  init a tinymce environnement
 *    
 * @param jTplCompiler $compiler 
 */
function jtpl_cfunction_html_tinymce($compiler, $params=array()) {
 
    // on génère du code php qui sera intégré dans le template compilé
 
    $codesource = '$rep = $GLOBALS[\'gJCoord\']->response;
                   if($rep!=null) {
                       $rep->addJSLink(\'js/tinymce/tiny_mce.js\');
                       $rep->addJSCode(\'tinyMCE.init({ mode : "textareas", theme : "simple"});\');
                    } ';
 
    $compiler->addMetaContent($codesource);
}
 
?>

Cette fonction charge le code Javascript de TinyMCE puis définit une configuration. On pourrait l'améliorer en permettant de prendre en paramètre la chaine du code source js à donner à tinyMCE.init.

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

Rien de plus simple ! Il suffit désormais d'ajouter la ligne de code suivante dans un template : {tinymce}

Le comportement par défaut de TinyMCE tel que configuré plus haut dans ce tutoriel consiste à remplacer les éléments HTML textarea par un éditeur de texte.

Créez un template demo_tinymce.tpl dans /tutoriel.tinymce/plugins/modules/essai/templates/

  <h1>Intégration de TinyMCE</h1>
 
{tinymce}
 
<form action="{formurl 'essai~default:index'}" method="POST">
{formurlparam 'essai~default:index'}
<div>
    <textarea name="mon_texte" id="mon_texte" cols="50" rows="15">{$monTexte|eschtml}</textarea><br/>
    <input type = "submit" value="Valider" />
</div>  
</form>

Le texte par défaut est contenu entre les balises de l'élément textarea : <textarea>…</textarea>.

Ouvrez le fichier /tutoriel.tinymce/plugins/modules/essai/controllers/default.classic.php

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

  $rep->bodyTpl = 'demo_tinymce';  
  $rep->body->assign('monTexte', "BONJOUR, mon nom est : Dominique");

Dans la barre d'adresse :

http://localhost/jelix/tutoriel.tinymce/www/index.php?module=essai&action=default:index

Dans un template :

{jurl 'essai~default:index'}

• Retour au sommaire des tutoriels