Getting Started

Required Skills

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

Basic client-side JavaScript

Required Tutorials Completed

The following tutorials are required to be undertaken before attempting this tutorial:

Tutorial

Step 1. Create an Instance of EditLive! in a Webpage and Set the Body

As shown in the Setting the Body in the Applet Tutorial, create an instance of EditLive! in a webpage and set the <BODY>.

<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.setBody(encodeURIComponent("<p>Original <i>HTML</i> loaded into EditLive!</p>"));
                       editlivejava.show();
               </script>
       </body>
</html>

Save this webpage as getBody.html.

Step 2. Create a HTML Textarea and a Button.

As seen in the Setting the Body in the Applet Tutorial, create a textarea and a button on the page. The purpose of the button in this tutorial will be to copy the contents of the <BODY> element in EditLive! into the textarea.

<html>
       <body>
               <p><textarea id="bodyContents" cols="80" rows="5"></textarea>
                       <br/><input type="button" value="Get <BODY> Contents" onclick="buttonPress()"></p>
               <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.setBody(encodeURIComponent("<p>Original <i>HTML</i> loaded into EditLive!</p>"));
                       editlivejava.show();
               </script>
       </body>
</html>

Step 3. Create a Javascript Function to Get the <BODY> of EditLive! with the Textarea Contents

In order to extract the <BODY> of the HTML Document stored in EditLive!, the getBody Method is used.

The GetBody run-time function requires a string parameter passed to be passed to it. This parameter is required to be the name of an existing Javascript method in the page. Once the getBody Method is called, the Javascript property passed will then be called, passing the <BODY> contents as a string parameter.

This tutorial contains a Javascript function called getEditLiveBody. When called, the string parameter passed to this function is then assigned to value of the textarea.

Hence, the GetBody property passes the string 'getEditLiveBody', which then calls the getEditLiveBody method, passing the <BODY> contents of EditLive! as the src parameter.

<html>
       <body>
               <form name="exampleForm">
                       <p><textarea id="bodyContents" cols="80" rows="5"></textarea>
                               <br/><input type="button" value="Get <BODY> Contents" onclick="buttonPress()"></p>
                       <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.setBody(encodeURIComponent("<p>Original <i>HTML</i> loaded into EditLive!</p>"));
                               editlivejava.show();
 
                               /** Function extracts the contents of the <body> field of the EditLive! HTML Document
                                * and displays this content in the textarea
                                */
                               function buttonPress() {
                                       // the parameter passed to the GetBody method is the callback method the applet will call, passing
                                       // the contents of the <BODY> attribute.
                                       editlive.getBody('getEditLiveBody');
                               }
 
                               function getEditLiveBody(src) {
                                       document.exampleForm.bodyContents.value = src;
                               }
                       </script>
               </form>
       </body>
</html>

EditLive! 9 Documentation : Getting the Body in the Applet Tutorial