Version 31 (modified by ejucovy, 10 years ago) (diff)

add _editor_icons example

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.

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

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.
    _editor_skin = "silva";    // If you want use a skin, add the name (of the folder) here
    _editor_icons = "classic"; // If you want to use a different iconset, add the name (of the folder, under the `iconsets` folder) here
  <script type="text/javascript" src="/xinha/XinhaCore.js"></script>

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

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

or just copy it into your page and wrap it in <script type="text/javascript"> </script> tags - 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.

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

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.

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!