Table des matières

Intégration de TinyMCE

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.

Pré-requis

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

Installation de TinyMCE

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éé.

Création du plugin de template

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”.

Appel de TinyMCE

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>.

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

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");

Voir le résultat !

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'}