	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 Single Web Files via FTP

Ephox, July 2001

Introduction
Using EditLive! with Single Web Files
Getting Started
Integrating EditLive!
Putting It All Together
Saving the File
Next Steps

Introduction

This article outlines how to integrate EditLive! 4.0 into your own HTML page for use with single Web files on a remote server via FTP. Client-side JavaScript is used to create and customize the EditLive! object.

Using EditLive! with Single Web Files via FTP

EditLive! is designed for use with single files from an FTP server, using FTPStandard mode. This mode works by loading the specified page directly into EditLive! from the remote server. When the changes have been made, and the page has been saved back to the remote server, the modifications are available for viewing immediately on the Web site. This eliminates the need for the cumbersome task of downloading and uploading files to the remote Web server. Examples of where this mode may be applied include the administration area of a business Web site where end users can create and manage the content of an intranet or a Web site service, from an ISP or Web host which allows subscribers to edit their personal Web pages online.

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

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

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 'FTPStandard'. In FTP Standard mode, it is also important to set all of the FTP settings so that EditLive! can interact with the web server to retrieve and save the desired file. FTP settings include:

FTPServer - specifies the name of the web server.
FTPServerPort - specifies the port number used to connect to the web server.
FTPUsername - specifies the name used to log on to the web server.
FTPPassword - specifies the password used to log on to the web server.
FTPInitialDirectory - specifies a directory on the web server to be used as the root directory for the EditLive! operations.

To load a file into EditLive, the loadFile method is called with the desired filename as the argument. To create a new file within EditLive!, the newFile method is called instead.

The WebRoot also needs to be specified. This is used to complete any relative addresses included in the content created within EditLive!. For this reason it needs to reflect the absolute URL of the working folder where the web file within EditLive! resides.

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

function editLive1_onload()
{     
   //** Run in FTPStandard mode
   editLive1.setEditLiveMode('FTPStandard');

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

   //** Load the 'default.htm' file into EditLive!
   editLive1.loadFile('default.htm');
   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 FTPStandard mode
   editLive1.setEditLiveMode('FTPStandard');

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

   //** Load the 'default.htm' file into EditLive!
   editLive1.loadFile('default.htm');
   editLive1.setWebRoot('http://www.yourserver.com');
}

//-->
</script>

</BODY>
</HTML>

Saving the File

When using EditLive! in FTPStandard mode, a Save button is available on the EditLive! toolbar. This allows the user to save the file back to the remote web server.

If you would prefer to include a separate Save button in the HTML page, this can be easily achieved using the EditLive! saveFile method. This method performs exactly the same function as the Save button on the EditLive! toolbar.

function btnSave_onclick() {  
            editLive1.saveFile()  
}

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 Single Web Files via FTP

Contents

Introduction

Using EditLive! with Single Web Files via FTP

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

Saving the File

Next Steps