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.
The following skills are required prior to working with this sample:
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:
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.
<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.
<form name="form1" method="POST">
<script language="JavaScript">
var editlivejava1;
editlivejava1 = new EditLiveJava("ELJApplet1",
"600", "400");
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.
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.
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.
editlivejava1.setLocalDeployment(false);
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.
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>
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.
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.
Copyright © 2001-2004 Ephox Corporation. All Rights Reserved.