Changes between Initial Version and Version 1 of Documentation/OldNewbieGuide


Ignore:
Timestamp:
03/10/05 12:50:51 (15 years ago)
Author:
akaEdge
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Documentation/OldNewbieGuide

    v1 v1  
     1== Newbie Guide == 
     2 
     3Firstly, this page is always being improved, so if you don't understand something, or you want to do something more with Xinha, then please post a message in the forum in the Newbie Guide thread. 
     4 
     5== Getting Started == 
     6 
     7You need to download the Xinha files - DownloadsPage - the latest stable release is recommended, as although the nightly release might have some improvements, it could also be broken which will make getting started a whole lot harder! 
     8 
     9== Install Files == 
     10 
     11Copy contents of the download into your web project and put them in a directory such as "xinha/". This means in your "xinha" directory will contain "examples", "images", "lang", "plugins", "popups" and a set of files. We recommend keeping the examples folder as it is an excellent reference if you want to customise anything later. Examples can be run and seen already now at "xinha/examples/full_example.html". 
     12 
     13== Page Code == 
     14 
     15Now you need the following code on your page, to turn an existing <textarea> into the WYSIWYG X-Area. 
     16 
     17From the top down, put this code in your <head> </head> section: 
     18 
     19'''<head>''' 
     20 
     21{{{ 
     22  <script type="text/javascript"> 
     23    _editor_url  = "/xinha/"  // (preferably absolute) URL (including trailing slash) where Xinha is installed 
     24    _editor_lang = "en";      // And the language we need to use in the editor. 
     25  </script> 
     26  <script type="text/javascript" src="/xinha/htmlarea.js"></script> 
     27}}} 
     28 
     29You will also need some config code in the <head> too - there are two ways of doing this: 
     30'''1)''' copying the text below into a new file called "xinha_config.js" and including this file using 
     31<script type="text/javascript" src="/xinha/xinha_config.js"></script> This allows you to use many X-Areas on many pages all with the same configuration. 
     32'''2)''' just copy the code below into your <head></head> section - this will need to be done on every page you want an editor on, and will allow you to customise each one as you want. 
     33 
     34{{{ 
     35  <script type="text/javascript"> 
     36    xinha_editors = null; 
     37    xinha_init    = null; 
     38    xinha_config  = null; 
     39    xinha_plugins = null; 
     40 
     41    // This contains the names of textareas we will make into Xinha editors 
     42    xinha_init = xinha_init ? xinha_init : function() 
     43    { 
     44      /** STEP 1 *************************************************************** 
     45       * First, what are the plugins you will be using in the editors on this 
     46       * page.  List all the plugins you will need, even if not all the editors 
     47       * will use all the plugins. 
     48       ************************************************************************/ 
     49 
     50      xinha_plugins = xinha_plugins ? xinha_plugins : 
     51      [ 
     52       'CharacterMap', 
     53       'ContextMenu', 
     54       'FullScreen', 
     55       'ListType', 
     56       'SpellChecker', 
     57       'Stylist', 
     58       'SuperClean', 
     59       'TableOperations' 
     60      ]; 
     61             // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :) 
     62             if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return; 
     63 
     64      /** STEP 2 *************************************************************** 
     65       * Now, what are the names of the textareas you will be turning into 
     66       * editors? 
     67       ************************************************************************/ 
     68 
     69      xinha_editors = xinha_editors ? xinha_editors : 
     70      [ 
     71        'myTextArea', 
     72        'anotherOne' 
     73      ]; 
     74 
     75      /** STEP 3 *************************************************************** 
     76       * We create a default configuration to be used by all the editors. 
     77       * If you wish to configure some of the editors differently this will be 
     78       * done in step 4. 
     79       * 
     80       * If you want to modify the default config you might do something like this. 
     81       * 
     82       *   xinha_config = new HTMLArea.Config(); 
     83       *   xinha_config.width  = 640; 
     84       *   xinha_config.height = 420; 
     85       * 
     86       *************************************************************************/ 
     87 
     88       xinha_config = xinha_config ? xinha_config : new HTMLArea.Config(); 
     89 
     90      /** STEP 3 *************************************************************** 
     91       * We first create editors for the textareas. 
     92       * 
     93       * You can do this in two ways, either 
     94       * 
     95       *   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
     96       * 
     97       * if you want all the editor objects to use the same set of plugins, OR; 
     98       * 
     99       *   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config); 
     100       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']); 
     101       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']); 
     102       * 
     103       * if you want to use a different set of plugins for one or more of the 
     104       * editors. 
     105       ************************************************************************/ 
     106 
     107      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
     108 
     109      /** STEP 4 *************************************************************** 
     110       * If you want to change the configuration variables of any of the 
     111       * editors,  this is the place to do that, for example you might want to 
     112       * change the width and height of one of the editors, like this... 
     113       * 
     114       *   xinha_editors.myTextArea.config.width  = 640; 
     115       *   xinha_editors.myTextArea.config.height = 480; 
     116       * 
     117       ************************************************************************/ 
     118 
     119 
     120      /** STEP 5 *************************************************************** 
     121       * Finally we "start" the editors, this turns the textareas into 
     122       * Xinha editors. 
     123       ************************************************************************/ 
     124 
     125      HTMLArea.startEditors(xinha_editors); 
     126    } 
     127 
     128    window.onload = xinha_init; 
     129  </script> 
     130 
     131}}} 
     132 
     133'''</head>''' 
     134 
     135== More Page Code == 
     136 
     137You need to make sure the textarea you want to convert has the "id" set, such as 
     138 
     139{{{ 
     140<textarea id="newbiearea1" name="newbiearea1" rows="10" cols="50" style="width: 100%"></textarea> 
     141}}} 
     142 
     143it can be the same as the name - just make sure there is only one thing on the page with that ID though! 
     144 
     145Now in the code you pasted into the head above (or in your "xinha_config.js" file if you did it that way) you need to edit the bit labelled "Step 2" which lists what editors need to be converted. 
     146 
     147In the example it lists two there 'myTextArea' and 'anotherOne' - you will need to change 'myTextArea' to whatever you set the ID of your textarea to - in this example we set it to 'newbiearea1'. You will also need to delete the reference to 'anotherOne' as you are currently only converting one area! (remember here that these values are comma seperated BUT there is no comma after the last value, so your code should look like this: 
     148 
     149{{{ 
     150      /** STEP 2 *************************************************************** 
     151       * Now, what are the names of the textareas you will be turning into 
     152       * editors? 
     153       ************************************************************************/ 
     154 
     155      xinha_editors = xinha_editors ? xinha_editors : 
     156      [ 
     157        'newbiearea1' 
     158      ]; 
     159}}} 
     160 
     161== Thats It! == 
     162 
     163Your X-Area will now appear when the page has finished loading (there is no need to change to OnLoad property of the <body> tag as the window.onload = xinha_init; takes care of that) 
     164 
     165Remember if you encounter any problems, post a reply on the Newbie Buide thread on the forum and we will clear it up and  do our best to make sure no-one else runs into the same thing! 
     166