	Developers
	Developers Home
	EditLive! for Java
	EditLive! for Windows
		System Requirements
		Getting Started
		Integration Samples
		Articles
		API Reference
	EditLive! for XML
	Discussion Forums

EditLive! 4.0 Integration Basics

Ephox, November 2001

Summary:

This article outlines how to integrate EditLive! 4.0 into your own HTML page. Client-side JavaScript is used to create and customize the EditLive! object.

Getting Started
Integrating EditLive!
Putting It All Together
Next Steps

Getting Started

Before You Integrate EditLive!

Before you integrate EditLive! you should have viewed the online demos at www.ephox.com, and downloaded and installed the latest Ephox EditLive! 4.0 Development Kit. You should then copy the entire editlive folder to your web server. This folder is installed with the EditLive! 4.0 Development Kit.

Prerequisite Skills

EditLive! integration requires basic knowledge of client-side JavaScript and HTML.

Integrating EditLive!

The following steps should be carried out to integrate EditLive! into an existing HTML page:

Include External Script Files
Insert a SCRIPT Block
Configure Global Variables
Create an EditLive Object
Set EditLive!'s properties

Please note: This code is not integrated into the web page that you wish to edit using EditLive!. This HTML page is a separate Web page which incorporates EditLive!, into which the web content to be modified is then loaded.

Step 1 - Include External Script Files

In order to integrate EditLive! into an existing Web page, several files need to be linked to your page. These files provide access to the EditLive! application programming interface (API) to use the properties and methods that are available.

Place the SCRIPT tags linking these files to your page in the HEAD section of your Web page.

<HTML>
<HEAD>
  <!-- *** STEP 1: include external script files *** -->
  <SCRIPT language="JavaScript1.2" src="editlive/editLive4.js"></SCRIPT>
  <SCRIPT language="VBScript" src="editlive/editLive4.vbs"></SCRIPT>
</HEAD>
...

Step 2 - Insert A SCRIPT Block

Insert a SCRIPT block at the location in your HTML page where you want EditLive! to appear.

...
<!-- *** STEP 2: insert a SCRIPT block *** -->
<SCRIPT language="JavaScript1.2">
<!--

//-->
</SCRIPT>
...

Step 3 - Configure Global Variables

Configure the global variables before you load an instance of EditLive!. The most important global variable is setDownloadDirectory, which sets where the EditLive! installation files (the "editlive" folder) can be found. This variable must be set correctly for EditLive! to install on your end-users' computers. This location needs to be relative to where your HTML page will be stored on the server.

...
<SCRIPT language="JavaScript1.2">
<!--

/*** STEP 3: configure global variables ***/
EditLiveGlobal.setDownloadDirectory("../editlive");

//-->
</SCRIPT>
...

For more information about configuring global variables refer to The EditLiveGlobal object.

Step 4 - Create an EditLive Object

Create an instance of EditLive! in your HTML page by using the JavaScript API to create a new "EditLive" JavaScript object.

...
<script language="JavaScript1.2">
<!--
...

/*** STEP 4: create an EditLive! instance ***/
var editLive1 = new EditLive("Plugin1", 600, 350);

//-->
</script>
...

The syntax of this function is:

var JSObjectName = new EditLive( actualControlName, width, height )

The parameters to the EditLive function are:

JSObjectName - String that represents the name of the EditLive! object.
actualControlName - String that serves no purpose in the current version of EditLive!. Note: the value cannot be the same as JSObjectName.
width - Number that specifies the width of the object in pixels.
height - Number that specifies the height of the object in pixels.

Step 5 - Set EditLive!'s Properties

After creating the EditLive object, you can now refer to it to initialize and customize EditLive!. This is done using the EditLive! API which was made accessible by referencing the external EditLive! script files in Step 1. These properties and methods are set in a function that is called when the web page is first loaded.

Firstly, name this onload function.

/*** STEP 5: assign an onload function to set properties and methods ***/
editLive1.onload = EditLive1_onload;

Then, use this function to define the initial properties and methods of the EditLive! object.

Important properties to set include:

The EditLive! Mode property
FTP server settings if required
How images are inserted and uploaded

The following is an example of a function that sets the EditLive! object to:

Run in HTMLString mode
Use the FTP server "ftp.ephox.com"
Enable end users to insert images from their local computer
Set the initial document contents of "An example default value"

function EditLive1_onload
{     
   //** Run in HTMLString mode
   editLive1.setEditLiveMode('HTMLString');

   //** Specify the FTP server settings
   editLive1.setFTPServer('ftp.yourserver.com');
   editLive1.setFTPUsername('ftp_username');
   editLive1.setFTPPassword('ftp_password');

   //** Enable end users to insert images from their local computer
   editLive1.setImageMode('LocalOnly');

   //** Set the initial document contents of "An example default value"
   editLive1.setSource('An example default value');
   editLive1.setWebRoot('http://www.yourserver.com');
}

Putting It All Together

Putting all the steps together results in the HTML code shown below,

<HTML>
<HEAD>
  <TITLE>Test page</TITLE>
  <!-- *** STEP 1: include external script files *** -->
  <SCRIPT language="JavaScript1.2" src="editlive/editLive4.js"></SCRIPT>
  <SCRIPT language="VBScript" src="editlive/editLive4.vbs"></SCRIPT>
</HEAD>
<BODY>

<h1>Test page</h1>

<!-- *** STEP 2: insert a SCRIPT block *** -->
<script language="JavaScript">
<!--

/*** STEP 3: configure global variables ***/
EditLiveGlobal.setDownloadDirectory("../editlive");

/*** STEP 4: create an EditLive! instance ***/
var editLive1 = new EditLive("Plugin1", 600, 350);

/*** STEP 5: assign an onload function to set properties and methods ***/
editLive1.onload = EditLive1_onload;

function EditLive1_onload
{     
   //** Run in HTMLString mode
   editLive1.setEditLiveMode('HTMLString');

   //** Use the FTP server "ftp.ephox.com"
   editLive1.setFTPServer('ftp.ephox.com');
   editLive1.setFTPUsername('user');
   editLive1.setFTPPassword('password');

   //** Enable end users to insert images from their local computer
   editLive1.setImageMode('LocalOnly');

   //** Set the initial document contents of "An example default value"
   editLive1.setSource('An example default value');
   editLive1.setWebRoot('http://www.ephox.com');
}

//-->
</script>

</BODY>
</HTML>

Next Steps

To see some specific examples of how to integrate EditLive! into a variety of applications please see the Developers section of our web site.

Copyright © 1999-2005 Ephox Corporation. All Rights Reserved. 'Ephox' is a registered trademark of Ephox Corporation.
Java and the Java Powered logo are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries.