Installing EditArea is very simple, follow the instructions here. Also look at the options for configuration and the different javascript load possibility.
Requirements
EditArea has no direct requirements except for browser compatibility and of course JavaScript needs to be turned on. For developpers there is also a PHP compressor that is included in the release.
Downloading
For downloading check the sourceforge web site.
Extracting the archives
On windows you could use WinZip or something similar. And on other operating systems such as Linux you simply extract the archive with the tar command.
You should extract EditArea somewhere in your website. Notice that EditArea loads additionnal files while being used (language translation, syntax definition and images), so don't delete any of the file in the archive, and be sure that any files can be accessed.
If you plan to use "edit_area_compressor.php" be sure that PHP scripts are allowed to write in editarea repertory (at the same level than the file "edit_area_compressor.php") in order to allow disk caching.
Making changes on your web site
Once you have extracted the archive you will need to edit the pages to include the configuration and javascript for EditArea. Please note that you should probably only include the EditArea javascript on the pages that need it, not all the pages of the web site. Remember to change the URL to the .js below to match your installation path.
The most basic page integration (converts one textarea into editor):
<html>
<head>
<title>EditArea Test</title>
<script language="javascript" type="text/javascript" src="/editarea/edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript">
editAreaLoader.init({
id : "textarea_1" // textarea id
,syntax: "css" // syntax to be uses for highgliting
,start_highlight: true // to display with highlight mode on start-up
});
</script>
</head>
<body>
<form method="post">
<textarea id="textarea_1" name="content" cols="80" rows="15">
/*This is some css that will be editable with EditArea.*/
body, html{
margin: 0;
padding: 0;
height: 100%;
border: none;
overflow: hidden;
}</textarea>
</form>
</body>
</html>
See the configuration help to learn about initialization options, and the include help to learn more about the way to use the best script include (there is 4 possible files for EditArea loading).
Here is an example of EditArea possibilities: Full exemple.
Just be sure you've read the documentation before...