Created by Jessica Hardy, last modified by Gavin Douglas on Jul 25, 2012

Overview

This tutorial provides developers with the basic knowledge required to instantiate EditLive! in a web page. 

Required Skills

The following skills are required prior to working with this tutorial:

  • Basic client-side JavaScript

Tutorial

Step 1. Create a HTML page

Create a basic webpage with the following content:

<html>
       <body>
       </body>
</html>

Save this webpage as instantiation.html

Step 2. Reference the editlivejava.js

EditLive! comes packaged with a directory called redistributables. This directory contains the core files required to instantiate EditLive! in a webpage.

EditLive! provides developers with Javascript methods to instantiate the editor to enable/disable a variety of functions. These Javascript functions are available through the editlivejava.js Javascript library, located in the redistributables directory.

Specify the editlivejava.js file in your instantiation.html webpage.

For example, if your instantiation.html file was in the same directory as the redistributables directory packaged with EditLive!, you would specify the following line of code:

<html>
       <body>
               <script src="../../redistributables/editlivejava/editlivejava.js" 
                       language="JavaScript"></script>
       </body>
</html>

Step 3. Define the editor name and size.

Instances of EditLive! are defined using the EditLiveJava javascript object. To define one of these objects, you need to use the EditLiveJava constructor. This constructor takes 3 parameters:

  • Name - the unique name for this particular instance of EditLive!. In the context of this tutorial, this value is arbitrary.
  • Width - a number specifying the width of the EditLive! instance, in pixels
  • Height - a number specifying the height of the EditLive! instance, in pixels

The example below shows how to specify an instance of EditLive!, with the name ELJApplet, a width of 700 pixels, and a height of 400 pixels. This instance of the editor is assigned to a Javascript variable called editlivejava.

<html>
       <body>
               <script src="../../redistributables/editlivejava/editlivejava.js" 
                       language="JavaScript"></script>
               <script>
                       var editlivejava = new EditLiveJava("ELJApplet", "700", "400");
               </script>
       </body>
</html>

Step 4. Specifying the EditLive! Configuration File

In order to customize and configure various elements of the editor, developers need to create and specify an EditLive! Configuration File. EditLive! Configuration Files are covered in detail in the both the Reference and Developer Guide sections of this SDK. The Creating and Editing Configuration Files tutorial describes in detail how to make and edit EditLive! Configuration Files. For the purposes of this tutorial, the example below uses the default configuration file (sample_eljconfig.xml) packaged with EditLive! and stored in the redistributables directory. To specify a Configuration File, the setConfigurationFile Method is used.

<html>
       <body>
               <script src="../../redistributables/editlivejava/editlivejava.js" 
                       language="JavaScript"></script>
               <script>
                       var editlivejava = new EditLiveJava("ELJApplet", "700", "400");
                       editlivejava.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
               </script>
       </body>
</html>

Step 6. Displaying EditLive!

The show Method of EditLive! is used to to render the applet on the page.

<html>
       <body>
               <script src="../../redistributables/editlivejava/editlivejava.js" 
                       language="JavaScript"></script>
               <script>
                       var editlivejava = new EditLiveJava("ELJApplet", "700", "400");
                       editlivejava.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
 
                       editlivejava.show();
               </script>
       </body>
</html>

Code

Get the full code at Instantiation Tutorial Code.