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

Having Multiple EditLive! Objects on a Web page

Ephox, November 2001

Summary

A number of EditLive! objects can be included in the one Web page if you wish to replace several plain text areas on an online form with the rich content interface of EditLive!. This article outlines how to implement the EditLive! code into your page in this situation.

More Information

Introduction

EditLive! can be used to replace several plain text areas on the one online form. There are certain things that need to be considered, however, when implementing the EditLive! code into the page.

This article assumes you have an understanding of the basics in integrating EditLive! into a page. If you would like to learn more about this before reading this article please go to EditLive! Integration Basics.

Sample Source Code

A sample of this situation will have been installed on your machine when you installed the Ephox EditLive! 4.0 Development Kit. To view the source code please click on Start > Programs > Ephox EditLive! > Samples > Open Sample Source Code Folder. The source code can be found in the folder Advanced > MultipleEL. To run this sample through your web server please click on the shortcut in the Ephox EditLive! folder in the Programs menu.

EditLive! code elements which only need to be included in the page once

1. Including the External EditLive! script files

The EditLive! script files, editLive4.js and editLive4.vbs, only needed to be referenced in the page once, in the HEAD section.

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

2. Configuring the EditLive! Global Variables

The location of the EditLive! download directory on the server only needs to be included in the page once, before any of the EditLive! objects are created.

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

/*** Configure global variables ***/
EditLiveGlobal.setDownloadDirectory("../editlive");

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

EditLive! code elements which need to be included for each EditLive! object

Each EditLive! object within the single Web page will need its own script block which will include:

A line of code to create the EditLive! object, giving it an original object name and actual control name.
A line of code to define the name of the onload function associated with that particular EditLive! object.
An onload function where the properties and methods are set for that particular EditLive! object.

For example, the script block for your first EditLive! object would look like the following:

<SCRIPT language="JavaScript">
<!--

//Instantiate the first EditLive! Object
var editLive1 = new EditLive("Plugin1", 600, 300);

//Assign an onload function for the first EditLive! object
editLive1.onload = EditLive1_onload;

//Use this function for initalizing and customizing the first EditLive! object
function EditLive1_onload()
{

   editLive1.setEditLiveMode('HTMLString');
   editLive1.setWebRoot('http://www.ephox.com/');
   editLive1.setSource('Sample content for first EditLive! object.');

}

//-->
</SCRIPT>

The script block for your second EditLive! object would look like the following:

<SCRIPT language="JavaScript">
<!--

//Instantiate the second EditLive! Object
var editLive2 = new EditLive("Plugin2", 600, 300);

//Assign an onload function for the second EditLive! object
editLive2.onload = EditLive2_onload;

//Use this function for initalizing and customizing the second EditLive! object
function EditLive2_onload()
{

   editLive2.setEditLiveMode('HTMLString');
   editLive2.setWebRoot('http://www.ephox.com/');
   editLive2.setSource('Sample content for second EditLive! object.');

}

//-->
</SCRIPT>

Things to Remember

Different properties and methods can be set for each EditLive! object within the page.
The actual control name must differ with each object, as well as the JavaScript object name (e.g. Plugin1, Plugin2 etc).
When registering EditLive!, a serverRegister method with the registration details must be included for each of the EditLive! objects on the page.

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.