Basic JavaScript Integration Guide

Introduction

This page provides information on how to instantiate Ephox EditLive! for Java within a Web page using JavaScript code.  This is intended as a basic sample only.  Its purpose is only to demonstrate how Ephox EditLive! for Java can be placed into a Web page.  

Getting Started

Required Skills

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

Overview

In this sample EditLive! for Java is embedded into a Web page using JavaScript code.  This sample is intended to show only how to create an instance of EditLive! for Java within a Web page, through the use of JavaScript code.

This sample demonstrates how to perform the following with EditLive! for Java and JavaScript:

Integrating EditLive! for Java

To embed EditLive! for Java within a Web page several steps are required.  Each of these steps is explained here and code samples are provided.

  1. Include the editlivejava.js file,
<script src="redistributables/editlivejava/editlivejava.js"></script>

The editlivejava.js file provides the interface to the EditLive! for Java .jar file (editlivejava.jar) which contains the source code.  This file can be found in the editlivejava subdirectory of the EditLive! for Java installation directory.

NOTE: This link, as shown here, is relative to the "webfolder" directory of the EditLive! for Java IIS SDK and may need to be changed when creating a new Web page.

  1. Create a form to place an instance of EditLive! for Java in.
<form name="form1" method="POST">
  1. Declare the EditLive! for Java object.
<script language="JavaScript">
    var editlivejava1;
  1. Create the EditLive! for Java object and declare the name, width and height properties.
    editlivejava1 = new EditLiveJava("ELJApplet1", "600", "400");
  1. Set the location for a valid EditLive! for Java configuration file.
    editlivejava1.setXMLURL("redistributables/editlivejava/sample_eljconfig.xml");

NOTE: This link, as shown here, is relative to the "webfolder" directory of the EditLive! for Java IIS SDK and may need to be changed when creating a new Web page.

  1. Set the initial contents of this instance of EditLive! for Java.
    editlivejava1.setBody(escape("<p>Document contents for EditLive! for Java</p>"));

NOTE:  The string used as the input value for the setBody property must be URL encoded or be encoded with the JavaScript escape function as above.

  1. Set the location where the source files for EditLive for Java can be downloaded from.
    editlivejava1.setDownloadDirectory("redistributables/editlivejava");

NOTE: This link, as shown here, is relative to the "webfolder" directory of the EditLive! for Java IIS SDK and may need to be changed when creating a new Web page.

  1. Set the location to download the JRE from, if necessary.  False indicates that the download will occur from a Sun Microsystems server.
    editlivejava1.setLocalDeployment(false);
  1. Display the EditLive! for Java applet and close the script and form elements.
    editlivejava1.show();
</script>
</form>

This section of code creates an instance of EditLive! for Java within the page and invokes methods which affect how EditLive! for Java will be presented within the page.  For more information on each of the methods here (the constructor, setXMLURL, setBody, setDownloadDirectory, setLocalDeployment and show) see the Ephox EditLive! for Java JavaScript Reference. After each of the properties have been set the show() method is called.  This method causes the instance of EditLive! for Java just created to be displayed in the Web page.

Complete Code

The following sample code can be used to create a simple example of EditLive! for Java within a Web page. 

<html>
    <head>
        <title>EditLive! for Java JavaScript Example</title>
    </head>
    <body>
        <!--Include the EditLive! for Java JavaScript Library-->
        <script src="redistributables/editlivejava/editlivejava.js"></script>
        Some text    
        <form name="form1" method="POST">
            <script language="JavaScript">
                //Create the EditLive! for Java object
                var editlivejava1;
                editlivejava1 = new EditLiveJava("ELJApplet1", "600", "400");
                //Set the location for the XMLURL
                editlivejava1.setXMLURL("redistributables/editlivejava/sample_eljconfig.xml");
                //Set the initial contents of EditLive! for Java
                editlivejava1.setBody(escape("<p>Document contents for EditLive! for Java</p>"));
                //Set the source file location directory
                editlivejava1.setDownloadDirectory("redistributables/editlivejava");
                //Set the JRE download location
                editlivejava1.setLocalDeployment(false);
                //Display the applet
                editlivejava1.show();
            </script>
        </form>
    </body>
</html>

Getting the Content Back out of EditLive! for Java

Because of the lack of LiveConnect support on various operating systems and browsers, EditLive! for Java populates a hidden field with its contents automatically rather than the developer calling for the contents explicitly. The name of the hidden field is contained within the same form as the EditLive! for Java instance and is given the name that was specified by the developer when the EditLive! for Java instance was created.  For example, ELJApplet1 was specified in the above example (editlivejava1 = new EditLiveJava("ELJApplet1", "600", "400");) so EditLive! would store its contents in the hidden field named ELJApplet1.  This hidden field is then posted with the rest of the form data when the submit button is pressed.  

EditLive! for Java automatically updates the hidden field by attaching itself to the form's onsubmit() handler.  If there is already a function specified in the onsubmit() handler then this function will run after the hidden field has been updated.  This means that you can still use the onsubmit() handler to run your own JavaScript functions.  If you use another button/image/event to submit the form by calling form.submit() the browser will not call the onsubmit() handler and EditLive! for Java will not populate the hidden field with data. For this reason, please ensure you use form.onsubmit() to avoid this problem.

Summary

EditLive! for Java may be quickly and easily placed within a Web page using some simple JavaScript code.  EditLive! for Java may have its size and configuration easily customized using the API listed in step four of the above procedure.

See Also