Piste :

Différences ¶

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

--- tutoriels:tinymce [2008/01/10 11:41] – remplacement du plugin par un plugin de type cfunction plutôt que function laurent
+++ tutoriels:tinymce [2008/01/10 13:53] – 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 [[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 [[manuel: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'}
-----
-   * [[tutoriels:|Retour au sommaire des tutoriels]]

fr/tutoriels/tinymce.txt · Dernière modification : 2012/04/14 19:45 de laurent