Changes between Initial Version and Version 1 of Documentation/OldNewbieGuideFrance


Ignore:
Timestamp:
05/28/05 04:04:22 (15 years ago)
Author:
mokhet
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Documentation/OldNewbieGuideFrance

    v1 v1  
     1== Guide du débutant == 
     2 
     3[wiki:NewbieGuide English version]. 
     4 
     5Tout d'abord, cette page est régulièrement mise à jour, donc si vous ne comprenez pas, ou si vous voulez faire quelque chose de plus avec Xinha, veuillez alors poster une réponse dans le [http://xinha.gogo.co.nz/punbb/viewtopic.php?pid=255#p255 Newbie Guide thread] du forum. 
     6 
     7== Commencer == 
     8 
     9Vous devez [wiki:DownloadsPage télécharger] les fichiers de Xinha. La dernière release stable est recommandée, car bien que la version nightly contient certainement des améliorations, elle peut tout aussi bien être temporairement cassée. Ce qui rendrait l'initiation bien plus difficile ! '''***''' 
     10 
     11'''*** Normallement vous devriez utiliser la dernière release stable, mais au moment de l'écriture de ce document, vous devez utiliser la version "nightly" pour pouvoir faire fonctionner Xinha''' 
     12 
     13== Installer les fichiers == 
     14 
     15Copier le contenu du téléchargement sur votre serveur web dans un répertoire comme par exemple "xinha/". Cela signifie que votre répertoire "xinha" contient les répertoires "examples", "images", "lang", "plugins", "popups", "skins" et quelques fichiers. Nous vous recommandons de conserver le répertoire d'exemples puisqu'il sera une excellent référence si vous voulez configurer Xinha plus tard. Les exemples pourront dès lors être exécutés sur votre serveur web à l'adresse "xinha/examples/full_examples.html". 
     16 
     17== Code de la page == 
     18 
     19Maintenant vous avez besoin du code suivant sur votre page, pour transformer un <textarea> existant en un X-Area WYSIWYG. 
     20 
     21En tout premier lieu, ajouter ce code quelquepart dans votre page (si possible dans la section <head></head> de votre document HTML) : 
     22 
     23{{{ 
     24  <script type="text/javascript"> 
     25    _editor_url  = "/xinha/"  // (de préférence absolue) URL (incluant le slash de fin) où Xinha est installé 
     26    _editor_lang = "fr";      // Et la langue que nous voulons utiliser dans l'éditeur. 
     27  </script> 
     28  <script type="text/javascript" src="/xinha/htmlarea.js"></script> 
     29}}} 
     30 
     31Si vous utilisez un répertoire différent, assurez-vous de d'accorder l'url de htmlarea.js avec ce répertoire d'installation. 
     32 
     33Vous aurez également besoin d'un peu de code de configuration inclus également sur la page - il y a deux manière de le faire : 
     34 
     35 
     36'''1)''' copier le code de configuration ans un fichier appelé "my_config.js" puis inclure ce fichier en utilisant 
     37{{{ 
     38<script type="text/javascript" src="/xinha/my_config.js"></script> 
     39}}} 
     40 Cela vous permettra d'utiliser plusieurs X-Areas sur différentes pages en leur faisant tous partager la même configuration. 
     41 
     42'''2)''' copier le code suivant dans votre page - cela est nécessaire sur chaque page où vous désirez avec un éditeur, et vous permettra de les configurer individuellement. 
     43 
     44Vous aurez besoin d'encadrer le code suivant par les tags <script type="text/javascript"> </script> si vous utilisez cette deuxième option. 
     45 
     46{{{ 
     47    xinha_editors = null; 
     48    xinha_init    = null; 
     49    xinha_config  = null; 
     50    xinha_plugins = null; 
     51 
     52    // Contient les names des textareas que nous transformons en éditeurs Xinha 
     53    xinha_init = xinha_init ? xinha_init : function() 
     54    { 
     55      /** ETAPE 1 *************************************************************** 
     56       * Tout d'abord, quels sont les plugins à utiliser avec les éditeurs sur 
     57       * cette page. Liste tous les plugins nécessaires, même si tous les éditeurs 
     58       * n'utilisent pas tous les plugins. 
     59       ************************************************************************/ 
     60 
     61      xinha_plugins = xinha_plugins ? xinha_plugins : 
     62      [ 
     63       'CharacterMap', 
     64       'ContextMenu', 
     65       'FullScreen', 
     66       'ListType', 
     67       'SpellChecker', 
     68       'Stylist', 
     69       'SuperClean', 
     70       'TableOperations' 
     71      ]; 
     72             // CETTE TOUCHE DE JAVASCRIPT CHARGE LES PLUGINS, NE PAS TOUCHER :) 
     73             if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return; 
     74 
     75      /** ETAPE 2 *************************************************************** 
     76       * Maintenant, quels sont les noms (identifiants) des textareas à 
     77       * transformer en éditeurs ? 
     78       ************************************************************************/ 
     79 
     80      xinha_editors = xinha_editors ? xinha_editors : 
     81      [ 
     82        'myTextArea', 
     83        'anotherOne' 
     84      ]; 
     85 
     86      /** ETAPE 3 *************************************************************** 
     87       * Création d'une configuration par défaut utilisée par tous les éditeurs. 
     88       * Si vous voulez configurer certains éditeurs différement, cela pourra 
     89       * être fait en étape 5. 
     90       * 
     91       * Si vous voulez changer la configuration par défaut vous devez faire 
     92       * quelque chose comme ceci : 
     93       * 
     94       *   xinha_config = new HTMLArea.Config(); 
     95       *   xinha_config.width  = '640px'; 
     96       *   xinha_config.height = '420px'; 
     97       * 
     98       *************************************************************************/ 
     99 
     100       xinha_config = xinha_config ? xinha_config() : new HTMLArea.Config(); 
     101 
     102      /** ETAPE 4 *************************************************************** 
     103       * Création des éditeurs pour les textareas. 
     104       * 
     105       * Vous pouvez le faire de deux manières, soit 
     106       * 
     107       *   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
     108       * 
     109       * si vous voulez tous les éditeurs avec les mêmes plugins, SOIT : 
     110       * 
     111       *   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config); 
     112       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']); 
     113       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']); 
     114       * 
     115       * si vous voulez utiliser un jeu différent de plugins par éditeurs. 
     116       ************************************************************************/ 
     117 
     118      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
     119 
     120      /** ETAPE 5 *************************************************************** 
     121       * Si vous voulez changer les variables de configuration de n'importe lequel 
     122       * des éditeurs, c'est le moment de faire. Vous pouvez par exemple changer 
     123       * la largeur et la hauteur du textarea myTextArea en faisant : 
     124       * 
     125       *   xinha_editors.myTextArea.config.width  = '640px'; 
     126       *   xinha_editors.myTextArea.config.height = '480px'; 
     127       * 
     128       ************************************************************************/ 
     129 
     130 
     131      /** ETAPE 6 *************************************************************** 
     132       * Fin et "démarrage" des éditeurs. C'est ici que les textareas se 
     133       * transforment en éditeurs Xinha. 
     134       ************************************************************************/ 
     135 
     136      HTMLArea.startEditors(xinha_editors); 
     137    } 
     138 
     139    window.onload = xinha_init; 
     140 
     141}}} 
     142 
     143 
     144== Plus de code == 
     145 
     146Vous devez vous assurer que le tag du textarea a transformer possède un bien un paramètre "id" 
     147 
     148{{{ 
     149<textarea id="newbiearea1" name="newbiearea1" rows="10" cols="50" style="width: 100%"></textarea> 
     150}}} 
     151 
     152il peut être le même que le "name" - assurez-vous juste que cet identifiant est unique sur la page ! 
     153 
     154Maintenant, dans le code copié dans le fichier "my_config.js" (ou dans le <head></head> si vous avez utilisé cette méthode), vous devez éditer l'étape 2 qui liste les éditeurs à transformer. 
     155 
     156Dans cet example, deux textareas sont listés : 'myTextArea' et 'anotherOne' - vous devez changer 'myTextArea' en l'ID défini pour votre textarea - dans ce nouvel exemple, nous l'avons appelé 'newbiearea1'. Vous devez également supprimer la référence à 'anotherOne' puisque nous ne transformons que un seul textarea ici ! ('''attention, ici les valeurs sont séparées par des virgules MAIS il n'y a pas de virgule après la dernière valeur'''), votre nouveau code devrait ressembler à ceci : 
     157 
     158{{{ 
     159      /** ETAPE 2 *************************************************************** 
     160       * Maintenant, quels sont les noms (identifiants) des textareas à 
     161       * transformer en éditeurs ? 
     162       ************************************************************************/ 
     163 
     164      xinha_editors = xinha_editors ? xinha_editors : 
     165      [ 
     166        'newbiearea1' 
     167      ]; 
     168}}} 
     169 
     170== Et voilà ! == 
     171 
     172Votre X-Area apparait maintenant sur la page quand celle-ci a fini de se charger (pas besoin de toucher à la propriété onload du tag <body> puisque window.onload = xinha_init; en prend soin) 
     173 
     174Rappelez-vous, si vous avez un quelconque problème, postez une réponse dans le [http://xinha.gogo.co.nz/punbb/viewtopic.php?pid=255#p255 Newbie Guide thread] du forum et nous nous efforçons de trouver une solution et que personne d'autre ne recontre encore cette même difficulté ! 
     175