EditLive! 9 Documentation : Capturing Content Before Submit Code
Created by Jessica Hardy, last modified by Kristin Repsher on May 14, 2012
<!--
******************************************************
capturingSubmit.html --
This tutorial shows developers how to extract the HTML
Document stored in EditLive! when a user submits the HTML
form.
Copyright © 2001-2006 Ephox Corporation. All rights reserved.
See license.txt for license agreement
******************************************************
-->
<html>
<head>
<title>Tutorial - Capturing the Editor's HTML Document when the Form is Submitted</title>
<link rel="stylesheet" href="stylesheet.css">
<!--
Include the EditLive! JavaScript Library
-->
<script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
</head>
<body>
<h1>Capturing the Editor's HTML Document when the Form is Submitted</h1>
<form name="exampleForm" action="myScript.asp" method="POST" onsubmit="return assignFields()">
<p>This tutorial shows how to extract the contents of the HTML Document in EditLive! when the enclosing HTML form is submitted.</p>
<!--
The textarea used to display EditLive!'s HTML document.
-->
<textarea id="documentContents" cols="80" rows="5">This field has the id 'documentContents'. The contents of this textarea are passed to a server-side script called 'myScript.asp'. Before the form is posted, the contents of EditLive! will be copied into this field.
</textarea>
<!--
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.setDocument(encodeURIComponent("<html><head><title>Default Document Title</title></head><body><p>Original <i>HTML Document</i> loaded into EditLive!</p></body></html>"));
// Disable the setAutoSubmit load-time property to ensure no errors are caused on form submission.
editlive.setAutoSubmit(false);
// .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 tells EditLive! to send its HTML Document to the getEditLiveDocument function.
*/
function assignFields() {
editlive.getDocument('getEditLiveDocument');
// return false to cause the form to not submit.
return false;
}
function getEditLiveDocument(src) {
// copying source from EditLive! into textarea
document.exampleForm.documentContents.value = src;
// inform the user the form will now submit
alert("The contents of EditLive! have been copied into the textarea.\nClick OK to submit the form.");
// manually trigger the form submission
document.exampleForm.submit();
}
</script>
<!--
The button for submitting the HTML form.
-->
<p><input type="submit" value="Submit the HTML Form"/></p>
</form>
</body>
</html>