Basic JavaScript Sample

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.  A database is not required for this basic sample. You cannot perform any saving of document content in this basic sample due to the lack of server side processing in the example code and the absence of a database.  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:

EditLive! for Java in basicjssample.html

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 redistributables/editlivejava subdirectory of the EditLive! for Java webfolder directory.  It is recommended that you do not edit this file.

  1. Create a form to place an instance of EditLive! for Java in.
<form name="form1" method="POST">
  1. Create the EditLive! for Java object.
<script language="JavaScript">
    //create the EditLive! for Java object
    var editlivejava1;
    editlivejava1 = new EditLiveJava("ELJApplet1", "600", "400");
    //Set the xml configuration file location
    editlivejava1.setXMLURL("redistributables/editlivejava/sample_eljconfig.xml");
    //Set the initial contents of the applet
    editlivejava1.setBody(escape("<p>Document contents for EditLive! for Java</p>"));
    //Set the location for the source files for EditLive! for Java
    editlivejava1.setDownloadDirectory("redistributables/editlivejava");
    //Set the location where the JRE should be downloaded from if necessary
    editlivejava1.setLocalDeployment(false);
    //Display the applet
    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() function is called.  This method causes the instance of EditLive! for Java just created to be displayed in the Web page.

Complete Code

This is a complete listing of the code used above:

<script src="redistributables/editlivejava/editlivejava.js"></script>
    <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("<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>

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