New Window Sample

Introduction

This page provides information on how to instantiate Ephox EditLive! for Java within a Web page using JavaScript code, and extract the HTML body from the applet. Its purpose is only to demonstrate how to extract the contents from EditLive! for Java.  For more information about embedding EditLive! for Java in a Web page using JavaScript see the Basic JavaScript Example.

Getting Started

Required Skills

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

Overview

A simple HTML page with a text frame is initially loaded. A button is provided to launch EditLive! for Java in a new window. When submit is pressed on this page, the contents from EditLive! for Java are written back to the text frame on the initial HTML page.

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

EditLive! for Java in New Window Sample

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. Please read and understand the Basic JavaScript Example first. This example merely builds on top of what you have learnt from the basic example. Two files will be needed; parent.html and newwinjssample.html.

First we will examine the HTML page, parent.html.

parent.html

  1. Create the function to open EditLive! for Java in a new window.
<script language="javascript">
<!--
// Opens a new window and launches EditLive! for Java
function openEditLiveforJava() {
var remote=null;
remote = window.open('newwinjssample.html','EditLive','width=' + 800 + ',height=' + 600 +',status=yes,resizable=yes,scrollbars=yes,location=yes,toolbar=yes');
} //openEditLiveJava
-->
</script>
  1. Create a button to open EditLive! for Java by calling the function created in step 1.
<input type="button" value="Launch EditLive! for Java" onClick="openEditLiveforJava();">
  1. Create the text area for the body to be displayed in.
<textarea name="elj_text" rows=30 cols=100></textarea>

 

newwinjssample.html

  1. Create the function to pass the contents back to the text frame on parent.html.
<script language=javascript>
<!--
//Submits the content to the parent and closes the window
function submitToParent() {
var parentWindow = window.opener;
parentWindow.document.parentForm.elj_text.value = document.form1.ELJApplet1.value;
window.close();
return false;
} //submitToParent
-->
</script>
  1. Create a form that calls the function you created in step 1 to pass the contents back to parent.html.
<form name="form1" onsubmit='return submitToParent();'> 
  1. Create the button that fires the onSubmit function.
<input type="submit" value="Submit">
  1. Embed and setup EditLive! for Java in a Web page. This step is identical to the process shown in the Basic JavaScript Example. Refer there for more information on how to embed Ephox EditLive! for Java into a Web page.

Summary

EditLive! for Java may be simply opened and its contents extracted, as can be seen in this example. 

See Also