Changes between Version 26 and Version 27 of NewbieGuide

Show
Ignore:
Timestamp:
10/29/07 23:46:22 (6 years ago)
Author:
ray (IP: 62.143.77.214)
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • NewbieGuide

    v26 v27  
    1111== Install Files == 
    1212 
    13 Copy 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", "skins" 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 on your web project at "xinha/examples/full_example.html". 
     13Copy contents of the download into your web project and put them in a directory such as "xinha/".  
     14This means in your "xinha" directory will contain "examples", "images", "lang", "plugins", "modules", "popups", "skins" and a set of files. 
     15We recommend keeping the examples folder as it is an excellent reference if you want to customise anything later. E 
     16xamples can be run and seen already now on your web project at "xinha/examples/full_example.html". 
    1417 
    1518== Page Code == 
    … …  
    4447{{{ 
    4548#!text/x-javascript 
    46     xinha_editors = null; 
    47     xinha_init    = null; 
    48     xinha_config  = null; 
    49     xinha_plugins = null; 
     49xinha_editors = null; 
     50xinha_init    = null; 
     51xinha_config  = null; 
     52xinha_plugins = null; 
    5053 
    51     // This contains the names of textareas we will make into Xinha editors 
    52     xinha_init = xinha_init ? xinha_init : function() 
    53     { 
    54       /** STEP 1 *************************************************************** 
    55        * First, what are the plugins you will be using in the editors on this 
    56        * page.  List all the plugins you will need, even if not all the editors 
    57        * will use all the plugins. 
    58        * 
    59        * The list of plugins below is a good starting point, but if you prefer 
    60        * a must simpler editor to start with then you can use the following  
    61        *  
    62        * xinha_plugins = xinha_plugins ? xinha_plugins : [ ]; 
    63        * 
    64        * which will load no extra plugins at all. 
    65        ************************************************************************/ 
     54// This contains the names of textareas we will make into Xinha editors 
     55xinha_init = xinha_init ? xinha_init : function() 
     56{ 
     57   /** STEP 1 *************************************************************** 
     58   * First, specify the textareas that shall be turned into Xinhas.  
     59   * For each one add the respective id to the xinha_editors array. 
     60   * I you want add more than on textarea, keep in mind that these  
     61   * values are comma seperated BUT there is no comma after the last value. 
     62   * If you are going to use this configuration on several pages with different 
     63   * textarea ids, you can add them all. The ones that are not found on the 
     64   * current page will just be skipped. 
     65   ************************************************************************/ 
     66   
     67  xinha_editors = xinha_editors ? xinha_editors : 
     68  [ 
     69    'myTextArea', 'anotherOne' 
     70  ]; 
     71   
     72  /** STEP 2 *************************************************************** 
     73   * Now, what are the plugins you will be using in the editors on this 
     74   * page.  List all the plugins you will need, even if not all the editors 
     75   * will use all the plugins. 
     76   * 
     77   * The list of plugins below is a good starting point, but if you prefer 
     78   * a simpler editor to start with then you can use the following  
     79   *  
     80   * xinha_plugins = xinha_plugins ? xinha_plugins : [ ]; 
     81   * 
     82   * which will load no extra plugins at all. 
     83   ************************************************************************/ 
    6684 
    67       xinha_plugins = xinha_plugins ? xinha_plugins : 
    68       [ 
    69        'CharacterMap', 
    70        'ContextMenu', 
    71        'ListType', 
    72        'SpellChecker', 
    73        'Stylist', 
    74        'SuperClean', 
    75        'TableOperations' 
    76       ]; 
    77              // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :) 
    78              if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return; 
    79  
    80       /** STEP 2 *************************************************************** 
    81        * Now, what are the names of the textareas you will be turning into 
    82        * editors? 
    83        ************************************************************************/ 
    84  
    85       xinha_editors = xinha_editors ? xinha_editors : 
    86       [ 
    87         'myTextArea', 
    88         'anotherOne' 
    89       ]; 
    90  
    91       /** STEP 3 *************************************************************** 
    92        * We create a default configuration to be used by all the editors. 
    93        * If you wish to configure some of the editors differently this will be 
    94        * done in step 5. 
    95        * 
    96        * If you want to modify the default config you might do something like this. 
    97        * 
    98        *   xinha_config = new Xinha.Config(); 
    99        *   xinha_config.width  = '640px'; 
    100        *   xinha_config.height = '420px'; 
    101        * 
    102        *************************************************************************/ 
    103  
    104        xinha_config = xinha_config ? xinha_config() : new Xinha.Config(); 
    105  
    106       /** STEP 4 *************************************************************** 
    107        * We first create editors for the textareas. 
    108        * 
    109        * You can do this in two ways, either 
    110        * 
    111        *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
    112        * 
    113        * if you want all the editor objects to use the same set of plugins, OR; 
    114        * 
    115        *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config); 
    116        *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']); 
    117        *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']); 
    118        * 
    119        * if you want to use a different set of plugins for one or more of the 
    120        * editors. 
    121        ************************************************************************/ 
    122  
    123       xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
    124  
    125       /** STEP 5 *************************************************************** 
    126        * If you want to change the configuration variables of any of the 
    127        * editors,  this is the place to do that, for example you might want to 
    128        * change the width and height of one of the editors, like this... 
    129        * 
    130        *   xinha_editors.myTextArea.config.width  = '640px'; 
    131        *   xinha_editors.myTextArea.config.height = '480px'; 
    132        * 
    133        ************************************************************************/ 
     85  xinha_plugins = xinha_plugins ? xinha_plugins : 
     86  [ 
     87   'CharacterMap', 
     88   'ContextMenu', 
     89   'ListType', 
     90   'Stylist', 
     91   'Linker', 
     92   'SuperClean', 
     93   'TableOperations' 
     94  ]; 
     95   
     96         // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :) 
     97         if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return; 
    13498 
    13599 
    136       /** STEP 6 *************************************************************** 
    137        * Finally we "start" the editors, this turns the textareas into 
    138        * Xinha editors. 
    139        ************************************************************************/ 
     100  /** STEP 3 *************************************************************** 
     101   * We create a default configuration to be used by all the editors. 
     102   * If you wish to configure some of the editors differently this will be 
     103   * done in step 5. 
     104   * 
     105   * If you want to modify the default config you might do something like this. 
     106   * 
     107   *   xinha_config = new Xinha.Config(); 
     108   *   xinha_config.width  = '640px'; 
     109   *   xinha_config.height = '420px'; 
     110   * 
     111   *************************************************************************/ 
    140112 
    141       Xinha.startEditors(xinha_editors); 
    142     } 
     113   xinha_config = xinha_config ? xinha_config() : new Xinha.Config(); 
     114    
     115         
     116   // To adjust the styling inside the editor, we can load an external stylesheet like this 
     117   // NOTE : YOU MUST GIVE AN ABSOLUTE URL 
     118   
     119   xinha_config.pageStyleSheets = [ _editor_url + "examples/full_example.css" ]; 
    143120 
    144     Xinha._addEvent(window,'load', xinha_init); // this executes the xinha_init function on page load  
    145                                                 // and does not interfere with window.onload properties set by other scripts 
     121  /** STEP 4 *************************************************************** 
     122   * We first create editors for the textareas. 
     123   * 
     124   * You can do this in two ways, either 
     125   * 
     126   *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
     127   * 
     128   * if you want all the editor objects to use the same set of plugins, OR; 
     129   * 
     130   *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config); 
     131   *   xinha_editors.myTextArea.registerPlugins(['Stylist']); 
     132   *   xinha_editors.anotherOne.registerPlugins(['CSS','SuperClean']); 
     133   * 
     134   * if you want to use a different set of plugins for one or more of the 
     135   * editors. 
     136   ************************************************************************/ 
     137 
     138  xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
     139 
     140  /** STEP 5 *************************************************************** 
     141   * If you want to change the configuration variables of any of the 
     142   * editors,  this is the place to do that, for example you might want to 
     143   * change the width and height of one of the editors, like this... 
     144   * 
     145   *   xinha_editors.myTextArea.config.width  = '640px'; 
     146   *   xinha_editors.myTextArea.config.height = '480px'; 
     147   * 
     148   ************************************************************************/ 
     149 
     150 
     151  /** STEP 6 *************************************************************** 
     152   * Finally we "start" the editors, this turns the textareas into 
     153   * Xinha editors. 
     154   ************************************************************************/ 
     155 
     156  Xinha.startEditors(xinha_editors); 
     157} 
     158 
     159Xinha._addEvent(window,'load', xinha_init); // this executes the xinha_init function on page load  
     160                                            // and does not interfere with window.onload properties set by other scripts 
    146161 
    147162}}} 
    … …  
    159174it can be the same as the name - just make sure there is only one thing on the page with that ID though! 
    160175 
    161 Now in the code you pasted into your "my_config.js" file (or in the <head></head> if you did it that way) you need to edit the bit labelled "Step 2" which lists what editors need to be converted. 
     176Now in the code you pasted into your "my_config.js" file (or in the <head></head> if you did it that way) you need to edit the bit labelled "Step 1" which lists what editors need to be converted. 
    162177 
    163 In the example it lists two: '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: 
     178In the example it lists two: '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'('''remember here that these values are comma seperated BUT there is no comma after the last value'''), so your code should look like this: 
    164179 
    165180{{{ 
    166181#!text/x-javascript 
    167       /** STEP 2 *************************************************************** 
    168        * Now, what are the names of the textareas you will be turning into 
    169        * editors? 
    170        ************************************************************************/ 
    171182 
    172183      xinha_editors = xinha_editors ? xinha_editors : 
    … …  
    182193You can now, if you want to, go on with configuring the editor. You can find a [wiki:Documentation/ConfigVariablesList list of available options] here. 
    183194 
    184 Remember if you encounter any problems, post a reply on the [http://xinha.gogo.co.nz/punbb/viewtopic.php?pid=255#p255 Newbie Guide 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! 
     195Remember if you encounter any problems, don't hesitate to ask  [http://xinha.gogo.co.nz/punbb/viewtopic.php?pid=255#p255 on the forum] and we will clear it up and  do our best to make sure no-one else runs into the same thing! 
    185196