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

Ephox, July 2001

Introduction
Using EditLive! with Multiple 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 multiple web files on a remote server via FTP. Client-side JavaScript is used to create and customize the EditLive! object.

Using EditLive! with Multiple Web Files via FTP

EditLive! can be used to manage multiple Web files on a remote server. This mode offers an interface similar to Microsoft FrontPage with an extra pane to the left of the editing window to show the file directory structure. This extra pane can be used to access multiple files on the Web server for modification within EditLive!. Files can also be added to or deleted from the Web directory, or renamed. This mode is known as FTPFileManager.

The system administrator may wish to offer their end users access to edit multiple files without allowing them to add or delete files from the Web directory. If this is the case, FTPFileManagerReadOnly mode can be used to only allow the user to modify existing files within EditLive!.

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 'FTPFileManager' or 'FTPFileManagerReadOnly. The FTP settings of the file directory to be loaded into EditLive! also need to be specified. These 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.

To list a specific directory on the web server, you can use the FTPInitialDirectory property. This specifies the folder used as the root directory within EditLive!. Once this property has been specified, end users can only access files and folders below this directory on the file tree.

To load an initial file into the right hand pane of EditLive, the loadFile method is called with the desired filename as the argument. Alternatively, to create a new file, use the newFile method.

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 FTPFileManager mode
   editLive1.setEditLiveMode('FTPFileManager');

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

   //** Specify the 'press' directory as the root directory
   editLive1.setFTPInitialDirectory('press');

   //** 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 FTPFileManager mode
   editLive1.setEditLiveMode('FTPFileManager');

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

   //** Specify the 'press' directory as the root directory
   editLive1.setFTPInitialDirectory('press');

   //** 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 Multiple Web Files via FTP

Contents

introduction

Using EditLive! with Multiple 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