Changes between Initial Version and Version 1 of Documentation/BasicUsage


Ignore:
Timestamp:
05/21/05 02:32:53 (14 years ago)
Author:
mokhet
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Documentation/BasicUsage

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