Migration Example

The basic integration code for EditLive! is very similar to the EditLive! for Windows code. The core initialization settings all have equivalent options in both products.

External Script Files

EditLive! for Windows has two files; one JavaScript, one VBScript. EditLive! only has one, a JavaScript file.

EditLive! for Windows code:

<HTML>
<HEAD>
  <SCRIPT language="JavaScript1.2" src="editlive/editLive4.js"></SCRIPT>
  <SCRIPT language="VBScript" src="editlive/editLive4.vbs"></SCRIPT>
</HEAD>
...

EditLive! code:

<HTML>
<HEAD>
  <SCRIPT language="JavaScript1.2" 
      src="editlivejava/editlivejava.js"></SCRIPT>
</HEAD>
...

Configuring Global Variables

The EditLive! JavaScript does not have any global variables, all settings are per instance. As such, instead of the following EditLive! for Windows code:

...
<SCRIPT language="JavaScript1.2">
<!--
EditLiveGlobal.setDownloadDirectory("editlive");
//-->
</SCRIPT>
...

Looks like this in EditLive! - note that the line must come after creating the EditLive! object:

...
<SCRIPT language="JavaScript1.2">
<!--
var editLive1 = new EditLiveJava("Plugin1", 600, 350);
editLive1.setDownloadDirectory("editlivejava");
//-->
</SCRIPT>
...

Creating the EditLive! Object

This step is identical in both products, with only the object name changing. In EditLive! for Windows:

...
<script language="JavaScript1.2">
<!--
...
var editLive1 = new EditLive("Plugin1", 600, 350);
//-->
</script>
...

In EditLive!:

...
<SCRIPT language="JavaScript1.2">
<!--
var editLive1 = new EditLiveJava("Plugin1", 600, 350);
//-->
</SCRIPT>
...

Set EditLive!'s Properties

Unlike EditLive! for Windows, none of the core EditLive! editor properties are set in JavaScript; rather they are contained within the XML Configuration File. This is a much easier to use method that reduces the amount of JavaScript code needed and is also easier to maintain thanks to the EditLive! Configuration Tool.

As such, the onload function from EditLive! for Windows is not needed in EditLive!.

editLive1.onload = EditLive1_onload;

EditLive! code:

editLive1.setConfigurationFile("editlivejava/sample_eljconfig.xml");

For information on mapping EditLive! for Windows properties to your new EditLive! integration, see the Migrating JavaScript commands to XML document.

Set initial content

EditLive! for Windows will not accept content until it has been loaded:

function EditLive1_onload {
   editLive1.setSource('An example default value');
}

EditLive! meanwhile requires that the initial content be set before it is loaded, and also that content is URL encoded to handle cross-browser and multilingual content:

editLive1.setBody(encodeURIComponent("<p>sample <strong>text</strong> for the content</p>"));
editLive1.show();

Note the use of the show() method - this signals to the JavaScript code that all initial properties have been set and the applet tag can be written to the document.

Complete basic integration code

This is what a basic integration of EditLive! for Windows looks like:

<HTML>
<HEAD>
  <TITLE>Test page</TITLE>
  <SCRIPT language="JavaScript1.2" src="editlive/editLive4.js"></SCRIPT>
  <SCRIPT language="VBScript" src="editlive/editLive4.vbs"></SCRIPT>
</HEAD>
<BODY>
<h1>Test page</h1>
<script language="JavaScript">
<!--
EditLiveGlobal.setDownloadDirectory("../editlive");
var editLive1 = new EditLive("Plugin1", 600, 350);
editLive1.onload = EditLive1_onload;
function EditLive1_onload
{
   editLive1.setEditLiveMode('HTMLString');
   editLive1.setSource('<p>sample <strong>text</strong> for the content</p>');

}
//-->
</script>
</BODY>
</HTML>

And here is the equivalent EditLive! integration:

<HTML>
<HEAD>
  <TITLE>Test page</TITLE>
  <SCRIPT language="JavaScript1.2" src="editlivejava/editlivejava.js"></SCRIPT>
</HEAD>
<BODY>
<h1>Test page</h1>
<script language="JavaScript">
<!--
var editLive1 = new EditLiveJava("Plugin1", 600, 350);
editLive1.setDownloadDirectory("editlivejava");
editLive1.setXML("editlivejava/sample_eljconfig.xml");
editLive1.setBody(encodeURIComponent("<p>sample <strong>text</strong> for the content</p>"));
editLive1.show();
//-->
</script>
</BODY>
</HTML>