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

Using EditLive! with an Online Database or in an Online Form

Ephox, July 2001

Introduction
Using EditLive! with an Online Database or in an Online Form
Getting Started
Integrating EditLive!
Putting It All Together
Retrieving the EditLive! Content
Next Steps

Introduction

This article outlines how to integrate EditLive! 4.0 into your own HTML page for use on an online form or with an online database. Client-side JavaScript is used to create and customize the EditLive! object.

Using EditLive! with an Online Database or in an Online Form

EditLive! is perfect for replacing a simple text area on an online form to provide end users with the extended functionalities of image insertion, font formatting and hypertext creation. EditLive! is also ideal to act as the interface for creating and editing content stored in an online database. Using EditLive! for these purposes takes advantage of HTMLString mode, giving users WYSIWYG editing capabilities of HTML fragments.

Getting Started

Before You Integrate EditLive!

Before you integrate EditLive! you should have viewed the online demos at www.ephox.com and have 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

Please ensure you have read Integration Basics before using this sample.

Integrating EditLive!

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

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

Step 1 - Include External Script Files

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 variable, setDownloadDirectory, to where the EditLive! installation files (the "editlive" folder) can be found.

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

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

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

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

Step 5 - Set EditLive!'s Properties

Name the onload function which will be used to initialize and customize the EditLive! object.

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

In this case, the EditLive! mode must be set to 'HTMLString'. Another important thing to specify is what Image Mode EditLive! is to be run in. The default value is 'None' meaning that if this property isn't set, users can not insert images. In this sample the image mode has been set to all. This means that the FTP details to allow the user to insert images from a remote server via FTP have also been defined.

It is essential that the WebRoot property is defined. This property allows relative links within the page to be established so that once the content is published relative image links and hyperlinks work correctly.

Lastly, if some initial content is to be loaded into EditLive, this is done using the Source or SourceAll properties.

For a full list of the EditLive! properties and methods available, please see the EditLive! reference section.

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 all locations
   editLive1.setImageMode('All');

   //** 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');

   //** 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 all locations
   editLive1.setImageMode('All');

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

//-->
</script>

</BODY>
</HTML>

Retrieving the EditLive! Content

When using EditLive! in HTMLString mode, either the getSource or getSourceAll properties can be used to return the content from the EditLive! object as a string. Using getSourceAll will return the full HTML page, whereas getSource will only return the HTML between the body tags.

When using EditLive! is this way, the contents of EditLive! are often passed to a hidden form object for easy processing. The following JavaScript function btnSubmit_onclick() retrieves the contents of EditLive! when the form Submit button is pressed, and passes it to the hidden form object mySource, contained in the form myForm.

function btnSubmit_onclick() {  
            document.myForm.mySource.value = editLive1.getSource()  
}

The form code would look as follows.

<form name="myForm" onsubmit="btnSubmit_onclick()">  
<input type="hidden" name="mySource">  
<input type="submit" name="submit" value="Submit">
</form>

Next Steps

To see some specific examples of how to integrate EditLive! into a variety of applications please see the advanced samples for specific platforms.

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.

Using EditLive! with an Online Database or in an Online Form

Contents

Introduction

Using EditLive! with an Online Database or in an Online Form

Getting Started

Before You Integrate EditLive!

Prerequisite Skills

Integrating EditLive!

Step 1 - Include External Script Files

Step 2 - Insert a SCRIPT block

Step 3 - Configure Global Variables

Step 4 - Create an EditLive Object

Step 5 - Set EditLive!'s Properties

Putting It All Together

Retrieving the EditLive! Content

Next Steps