EditLive! 9 Documentation : Setting the Body in the Applet Code
Created by Jessica Hardy, last modified by Kristin Repsher on May 21, 2012
<!--
******************************************************
setBody.html --
This tutorial shows developers how to populate the <BODY> of
a Document stored in EditLive!, at both load-time and run-time.
Copyright © 2001-2006 Ephox Corporation. All rights reserved.
See license.txt for license agreement
******************************************************
-->
<html>
<head>
<title>Setting the Body of the Editor's HTML Document - Tutorial</title>
<link rel="stylesheet" href="stylesheet.css">
<!--
Include the EditLive! JavaScript Library
-->
<script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
</head>
<body>
<h1>Setting the Body of the Editor's HTML Document</h1>
<form name="exampleForm">
<p>This tutorial shows how to populate the <BODY> of the Document stored in EditLive!</p>
<p>This tutorial also shows how to extract the contents of a HTML field and store this HTML in EditLive! Document <BODY>.</p>
<!--
The textarea used to load HTML content into the <body> of EditLive!'s HTML document.
-->
<textarea name="bodyContents" cols="80" rows="5"><p>Text Area Contents.<br/><b>Note: </b>Ensure this text area contains correctly formatted <i>HTML</i></p></textarea>
<!--
The button for copying the content from the textarea to EditLive!
-->
<p>Pressing this button will copy the HTML contents of the above textarea into the <BODY> of the Document stored in EditLive!<br/>
<input type="button" value="Set <BODY> Contents" onclick="buttonPress()"></p>
<!--
The instance of EditLive!
-->
<script language="JavaScript">
// Create a new EditLive! instance with the name "ELApplet", a height of 400 pixels and a width of 700 pixels.
var editlive = new EditLiveJava("ELApplet", 700, 400);
// This sets a relative or absolute path to the XML configuration file to use
editlive.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
// Before sending HTML to the instance of EditLive!, this HTML must be URL Encoded.
// Javascript provides several URL Encoding methods, the best of which is
// 'encodeURIComponent()'
editlive.setBody(encodeURIComponent("<p>Original <i>HTML</i> loaded into EditLive!</p>"));
// .show is the final call and instructs the JavaScript library (editlivejava.js) to insert a new EditLive! instance
// at the this location.
editlive.show();
/** Function extracts the contents of the 'bodyContents' textarea and sets this HTML into
* the <body> field of the EditLive! HTML Document.
*/
function buttonPress() {
// Before sending HTML to the instance of EditLive!, this HTML must be URL Encoded.
// Javascript provides several URL Encoding methods, the best of which is
// 'encodeURIComponent()'
editlive.setBody(encodeURIComponent(document.exampleForm.bodyContents.value));
}
</script>
</form>
</body>
</html>