====== Intégration de TinyMCE ======

Nous apprendrons ici comment intégrer l'éditeur javascript [[http://tinymce.moxiecode.com/|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 [[http://wiki.moxiecode.com/index.php/TinyMCE:Index|wiki]] de TinyMCE.

Enfin, ce tutoriel est basé sur le tutoriel [[fr:tutoriels:fckeditor|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 :

<code bash>
  php jelix.php --tutoriel.tinymce createapp -nodefaultmodule
  php jelix.php --tutoriel.tinymce createmodule essai
</code>
Votre fichier de configuration defaultconfig.ini.php devrait avoir les valeurs suivantes:

<code ini>
  startModule = "essai"
  startAction = "default:index"
  [urlengine]
    engine        = simple
    multiview     = off
</code>


===== Installation de TinyMCE =====

Téléchargez le logiciel [[http://tinymce.moxiecode.com/download.php|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 =====

  * 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 :
<code php>
<?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);
}

?>
</code>

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 [[http://docs.jelix.org/fr/manuel-1.0/templates|"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/**
<code php>
  <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>

</code>

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');
<code php>
  $rep->bodyTpl = 'demo_tinymce';  
  $rep->body->assign('monTexte', "BONJOUR, mon nom est : Dominique");
</code>

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




----
   * [[fr:tutoriels:|Retour au sommaire des tutoriels]]