Raccourcis : Contenu - rubriques - sous rubriques
FR

Piste :

Wiki: Plan du site - Derniers changements - Back link

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
tutoriels:tinymce [2008/01/10 13:53] laurentfr:tutoriels:tinymce [2012/04/14 19:45] (Version actuelle) – [Création du plugin de template] laurent
Ligne 1: Ligne 1:
 +====== 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]]
  
fr/tutoriels/tinymce.txt · Dernière modification : 2012/04/14 19:45 de laurent
Fils rss des changements récents dans le wiki Creative Commons License