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édentes Révision précédente
Dernière révision Les deux révisions suivantes
fr:tutoriels:tinymce [2008/01/10 14:53]
laurent
fr:tutoriels:tinymce [2008/12/08 23:07]
127.0.0.1 modification externe
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 [[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 21:45 par laurent
Fils rss des changements récents dans le wiki Creative Commons License