Xinha allow to transform more than one TEXTAREA to WYSIWYG editors.

Include main script

Please see to Basic usage if the following lines are obscure. 

<script type="text/javascript">
 _editor_url = "/xinha/";
 _editor_lang = "en";
</script>
<script type="text/javascript" src="/xinha/XinhaCore.js"></script>

Form preparation

Every single TEXTAREA needing to be transformed to a Xinha editor obviously must have a uniq ID. In this sample, the form contains 4 TEXTAREA and only the fields description, resume and memo will be transformed. 

<form>
<textarea id="description"></textarea>
<textarea id="dont_turn"></textarea>
<textarea id="resume"></textarea>
<textarea id="memo"></textarea>
<form>

Editors preparation

We once again need to create a generic variable to hold the Xinha object to let us manipulate editors by javascript from anywhere on the page. We can also create every single javascript variable for each editors, method we will explore further when we will manipulate Xinha on HTML document having no clue about what is Xinha. For this sample here, we will use the fact that Xinha.makeEditors() return the array of every editors. In the first Basic usage, you may have noticed the brackets around the ID of the textarea transformed - Xinha.makeEditors(description?, config). It is because the parameter transmited is in fact an array of the ID to transform, which let us create many editors at once. 

 editeurs = Xinha.makeEditors(['description', 'resume', 'memo'], config);

Sample 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Sample</title>
<script type="text/javascript">
_editor_url = "/xinha/";
_editor_lang = "en";
</script>
<script type="text/javascript" src="/xinha/XinhaCore.js"></script>
<script type="text/javascript">
var editeurs = null;
function initXinha() {
 var config = new Xinha.Config();
 editeurs = Xinha.makeEditors(['description', 'resume', 'memo'], config);
 Xinha.startEditors(editeurs);
}
window.onload = initXinha;
</script>
</head>
<body>

<form>
<textarea id="description"></textarea>
<textarea id="dont_turn"></textarea>
<textarea id="resume"></textarea>
<textarea id="memo"></textarea>
</form>

</body>
</html>

Individual configuration

In the first sample, every editors have the same configuration. Obviously it is possible to force every editors to render in a different way. We will start by configure the global with and height we want by manipulating the global config object. 

 var config = new Xinha.Config();
 config.width = '400px';
 config.height = '200px';

Then we will individually update some of the config for each editors. This manipulation is very simple, because the method Xinha.makeEditors() return a javascript object which contain every single textarea transformed and their own config object.
In the second sample, description will have its status bar removed, resume height will be increased to 300 and memo will have its width set to auto. 

 editeurs = Xinha.makeEditors(['description', 'resume', 'memo'], config);
 editeurs.description.config.statusBar = false;
 editeurs.resume.config.height = '300px';
 editeurs.memo.config.width = 'auto';

Sample 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Sample</title>
<script type="text/javascript">
_editor_url = "/xinha/";
_editor_lang = "en";
</script>
<script type="text/javascript" src="/xinha/XinhaCore.js"></script>
<script type="text/javascript">
var editeurs = null;
function initXinha() {
 var config = new Xinha.Config();
 config.width = '600px';
 config.height = '200px';
 editeurs = Xinha.makeEditors(['description', 'resume', 'memo'], config);
 editeurs.description.config.statusBar = false;
 editeurs.resume.config.height = '300px';
 editeurs.memo.config.width = 'auto';
 Xinha.startEditors(editeurs);
}
window.onload = initXinha;
</script>
</head>
<body>

<form>
<textarea id="description"></textarea>
<textarea id="dont_turn"></textarea>
<textarea id="resume"></textarea>
<textarea id="memo"></textarea>
</form>

</body>
</html>