wiki:NewbieGuide

Version 22 (modified by ray, 11 years ago) (diff)

changed reference to HTMLArea.Config and htmlarea.js and added mime types for syntax highlighting of the examples

Newbie Guide

Version française.

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 in the Newbie Guide thread.

Getting Started

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!

Install Files

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".

Page Code

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):

  <script type="text/javascript">
    _editor_url  = "/xinha/"  // (preferably absolute) URL (including trailing slash) where Xinha is installed
    _editor_lang = "en";      // And the language we need to use in the editor.
  </script>
  <script type="text/javascript" src="/xinha/XinhaCore.js"></script>

If you are using a different directory, make sure you change the location of XinhaCore?.js in the above code accordingly.

You will also need some config code included in the page too - there are two ways of doing this:

1) copying the text below into a new file called "my_config.js" and including this file using

<script type="text/javascript" src="/xinha/my_config.js"></script>

This allows you to use many X-Areas on many pages all with the same configuration.

2) just copy the code below into your page - this will need to be done on every page you want an editor on, and will allow you to customise each one as you want. You will need to surround the code below with <script type="text/javascript"> </script> tags if you use this second option.

Error: Failed to load processor text/x-javascript
No macro or processor named 'text/x-javascript' found

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 2" 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'. 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:

Error: Failed to load processor text/x-javascript
No macro or processor named 'text/x-javascript' found

Thats It!

Your X-Area will now appear when the page has finished loading (there is no need to change to onload property of the <body> tag as the window.onload = xinha_init; takes care of that)

Remember if you encounter any problems, post a reply on the 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!