Firstly, 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.
You 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!
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", "modules", "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. E xamples can be run and seen already now on your web project at "xinha/examples/full_example.html".
Now you need the following code on your page, to turn an existing <textarea> into the WYSIWYG X-Area.
From the top down, put this code on your pages somewhere (if possible in your <head></head> section):
If you are using a different directory, make sure you change both _editor_url and the location of XinhaCore.js in the above code accordingly.
You will also need some config code included in the page too. Either put the code below into a new file called "my_config.js" and including this file using
More Page Code
You need to make sure the textarea you want to convert has the "id" set, such as
<textarea id="newbiearea1" name="newbiearea1" rows="10" cols="50" style="width: 100%"></textarea>
it can be the same as the name - just make sure there is only one thing on the page with that ID though!
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 1" which lists what editors need to be converted.
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'(remember here that these values are comma seperated BUT there is no comma after the last value), so your code should look like this:
Your X-Area will now appear when the page has finished loading.
You can now, if you want to, go on with configuring the editor. You can find a list of available options here.
Remember if you encounter any problems, don't hesitate to ask on the forum and we will clear it up and do our best to make sure no-one else runs into the same thing!