Changes between Version 2 and Version 3 of Documentation/BasicUsage


Ignore:
Timestamp:
03/16/18 00:35:20 (5 weeks ago)
Author:
gogo
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • Documentation/BasicUsage

    v2 v3  
    1 == Required elements == 
    2 === URL of script === 
    3 Xinha needs the variable '''_editor_url''' to be activated. 
    4 you may try a relative URL if you wish, but it's highly recommended to use an absolute URL. 
    5 Xinha require the trailing slash.[[BR]] 
    6 The variable here is set to '''/xinha/''' 
     1= Basic Usage = 
    72 
    8 === Language === 
    9 Xinha support localized languages. 
    10 It is only needing to set the variable '''_editor_lang''' to the wanted language. Set here to '''"en"'''. 
    11 This language can not be updated once Xinha script is loaded. 
     3  <script type="text/javascript" src="//s3-us-west-1.amazonaws.com/xinha/xinha-1.5-beta1/XinhaEasy.js"> 
     4    xinha_options = 
     5    { 
     6      xinha_editors:  'textarea.some-css-class-to-convert-to-xinha' 
     7    } 
     8  </script> 
    129 
    13 === Include main script === 
    14 It is of course needed to include the main script. Which could actually looks like the following code. 
     10The end. 
    1511 
    16 {{{ 
    17 #!text/html 
    18 <script type="text/javascript"> 
    19  _editor_url = "/xinha/"; 
    20  _editor_lang = "en"; 
    21 </script> 
    22 <script type="text/javascript" src="/xinha/XinhaCore.js"></script> 
    23 }}} 
    24  
    25 == Form preparation == 
    26 The TEXTAREA that's need to be turned into a Xinha editor, absoluty require an ID, uniq ID obviously. 
    27  
    28 {{{ 
    29 #!text/html 
    30 <form> 
    31 <textarea id="description"></texarea> 
    32 <form> 
    33 }}} 
    34  
    35 == Editor preparation == 
    36 === Generic variable creation === 
    37 Because it is usually required to manipulate Xinha by javascript, it is needed to create a variable to hold the object created. 
    38  
    39 === Init function === 
    40 It is needed to make a function to start the editor that we will trigger once the document is loaded. 
    41 In this function, we will do basic initialisation such as creation of the configuration object and editor start. 
    42  
    43 === Xinha start === 
    44 Once the document is loaded, the init function must be triggered. There is quite a lot of methods to do it, the two easiest for our first example here are : 
    45  
    46 {{{ 
    47 #!text/html 
    48 <body onload="initXinha();"> 
    49 }}} 
    50  
    51 or the method we will use here 
    52  
    53  
    54 {{{ 
    55 #!text/x-javascript 
    56 window.onload = initXinha; 
    57 }}} 
    58  
    59 Which finally give the following result. 
    60  
    61  
    62 {{{ 
    63 #!text/html 
    64 <script type="text/javascript"> 
    65 var editeur = null; 
    66 function initXinha() { 
    67  var config = new Xinha.Config(); 
    68  editeur = Xinha.makeEditors(['description'], config); 
    69  Xinha.startEditors(editeur); 
    70 } 
    71 window.onload = initXinha; 
    72 </script> 
    73 }}} 
    74  
    75 == Complete source code == 
    76  
    77 {{{ 
    78 #!text/html 
    79 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> 
    80 <html> 
    81 <head> 
    82 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    83 <title>Sample</title> 
    84 <script type="text/javascript"> 
    85 _editor_url = "/xinha/"; 
    86 _editor_lang = "en"; 
    87 </script> 
    88 <script type="text/javascript" src="/xinha/XinhaCore.js"></script> 
    89 <script type="text/javascript"> 
    90 var editeur = null; 
    91 function initXinha() { 
    92  var config = new Xinha.Config(); 
    93  editeur = Xinha.makeEditors(['description'], config); 
    94  Xinha.startEditors(editeur); 
    95 } 
    96 window.onload = initXinha; 
    97 </script> 
    98 </head> 
    99 <body> 
    100  
    101 <form> 
    102 <textarea id="description"></textarea> 
    103 <form> 
    104  
    105 </body> 
    106 </html> 
    107 }}} 
     12Ok there's a lot more you CAN do if you want, read the [wiki:Documentation/NewbieGuide] if you want to learn how.