wiki:Documentation/BasicUsage

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

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

Required elements

URL of script

Xinha needs the variable _editor_url to be activated. you may try a relative URL if you wish, but it's highly recommended to use an absolute URL. Xinha require the trailing slash.
The variable here is set to /xinha/

Language

Xinha support localized languages. It is only needing to set the variable _editor_lang to the wanted language. Set here to "en". This language can not be updated once Xinha script is loaded.

Include main script

It is of course needed to include the main script. Which could actually looks like the following code.

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

Form preparation

The TEXTAREA that's need to be turned into a Xinha editor, absoluty require an ID, uniq ID obviously.

<form>
<textarea id="description"></texarea>
<form>

Editor preparation

Generic variable creation

Because it is usually required to manipulate Xinha by javascript, it is needed to create a variable to hold the object created.

Init function

It is needed to make a function to start the editor that we will trigger once the document is loaded. In this function, we will do basic initialisation such as creation of the configuration object and editor start.

Xinha start

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

<body onload="initXinha();">

or the method we will use here

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

Which finally give the following result.

<script type="text/javascript">
var editeur = null;
function initXinha() {
 var config = new Xinha.Config();
 editeur = Xinha.makeEditors(['description'], config);
 Xinha.startEditors(editeur);
}
window.onload = initXinha;
</script>

Complete source code

<!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 editeur = null;
function initXinha() {
 var config = new Xinha.Config();
 editeur = Xinha.makeEditors(['description'], config);
 Xinha.startEditors(editeur);
}
window.onload = initXinha;
</script>
</head>
<body>

<form>
<textarea id="description"></textarea>
<form>

</body>
</html>