Getting Started
Required Skills
The following skills are required prior to working with this tutorial:
- Basic client-side JavaScript
- Basic Knowledge of XML
Required Tutorials Completed
The following tutorials are required to be undertaken before attempting this tutorial:
- Instantiation Tutorial
- Setting the Body in the Applet Tutorial
- Getting the Body in the Applet Tutorial
- Creating and Editing Configuration Files Tutorial
Tutorial
Step 1. Specifying the Decoding Character Set
The decoding character set is used by EditLive! to display the HTML loaded into the editor and created by the user.
The decoding character set used by EditLive! is specified by the <meta> tag in either the HTML document loaded into EditLive! or the Configuration File used by EditLive!. For more information on specifying the decodng character set, see the Developer Guide section of this SDK.
For the purpose of this tutorial, we will be loading HTML fragments into EditLive! (i.e setting the <BODY> element of the HTML Document). Hence, to define the decodinging character set, we'll need to specify this information in the Configuration File.
Open the sampleeljconfig.xml file packaged with EditLive! using a text editor. Locate the following line of code:
<!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->
Remove the <!-- and --> characters wrapping to tag.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
This will specify the UTF-8 character set for decoding the HTML content in EditLive!. Save the file as charEncoding.xml.
Step 2. 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>. Ensure you load the charEncoding.xml file you previously created.
<html>
<body>
<script src="../../redistributables/editlivejava/editlivejava.js"
language="JavaScript"></script>
<script>
var editlivejava = new EditLiveJava("ELJApplet", "700", "400");
editlivejava.setConfigurationFile("../../redistributables/editlivejava/charEncoding.xml");
editlivejava.setBody(encodeURIComponent("<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with “Smart Quotes”</p>"));
editlivejava.show();
</script>
</body>
</html>
Save this webpage as charEncoding.html.
Step 3. Create Controls and Code to Extract the <BODY> of EditLive! and Display the HTML in the Textarea
As seen in the Getting the Body in the Applet Tutorial, perform the following:
- Create a HTML textarea.
- Create a HTML button.
- Wrap the contents of the page in a HTML form.
- Create a method for the button to call that will extract the <BODY> contents of EditLive! and copy this content into the textarea.
<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/charEncoding.xml");
editlivejava.setBody(encodeURIComponent("<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with “Smart Quotes”</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.
editlivejava.getBody('getEditLiveBody');
}
function getEditLiveBody(src) {
document.exampleForm.bodyContents.value = src;
}
</script>
</form>
</body>
</html>
Step 4. Create Another Instance of EditLive!
To create another instance of EditLive! in the webpage. To do this, create a javascript variable and assign an instance of EditLive! to this variable by calling the EditLiveJava constructor. You'll need to specify a different name in this constructor than the name specified in the previous call to the EditLiveJava constructor. In the example below, the first instance of EditLive! specified the name ELJApplet. For our second instance of EditLive!, we'll specify the name ELJApplet2.
<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/charEncoding.xml");
editlivejava.setBody(encodeURIComponent("<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with “Smart Quotes”</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.
editlivejava.getBody('getEditLiveBody');
}
var editlivejava2 = new EditLiveJava("ELJApplet2", "700", "400");
function getEditLiveBody(src) {
document.exampleForm.bodyContents.value = src;
}
</script>
</form>
</body>
</html>
Now you can apply the other load-time properties required to instantiate an instance of EditLive!.
<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! Instance 2</p><p>Text with “Smart Quotes”</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.
editlivejava.getBody('getEditLiveBody');
}
var editlivejava2 = new EditLiveJava("ELJApplet2", "700", "400");
editlivejava2.setConfigurationFile("../../redistributables/editlivejava/charEncoding.xml");
editlivejava2.setBody(encodeURIComponent("<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with “Smart Quotes”</p>"));
editlivejava2.show();
function getEditLiveBody(src) {
document.exampleForm.bodyContents.value = src;
}
</script>
</form>
</body>
</html>
Another HTML button and corresponding onClick method will also need to be generated to copy the contents of this new instance of EditLive! into the textarea.
<html>
<body>
<form name="exampleForm">
<p><textarea id="bodyContents" cols="80" rows="5"></textarea>
<br/><input type="button" value="Get <BODY> Contents" onclick="button1Press()"></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! Instance 2</p><p>Text with “Smart Quotes”</p>"));
editlivejava.show();
/** Function extracts the contents of the <body> field of the EditLive! HTML Document
* and displays this content in the textarea
*/
function button1Press() {
// the parameter passed to the GetBody method is the callback method the applet will call, passing
// the contents of the <BODY> attribute.
editlivejava.getBody('getEditLiveBody');
}
</script>
<p><input type="button" value="Get <BODY> Contents for the Second Instance of EditLive!" onclick="button2Press()"></p>
<script language="Javascript">
var editlivejava2 = new EditLiveJava("ELJApplet2", "700", "400");
editlivejava2.setConfigurationFile("../../redistributables/editlivejava/charEncoding.xml");
editlivejava2.setBody(encodeURIComponent("<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with “Smart Quotes”</p>"));
editlivejava2.show();
function button2Press() {
// the parameter passed to the GetBody method is the callback method the applet will call, passing
// the contents of the <BODY> attribute.
editlivejava2.getBody('getEditLiveBody');
}
function getEditLiveBody(src) {
document.exampleForm.bodyContents.value = src;
}
</script>
</form>
</body>
</html>
Step 5. Specifying the Output Character Set
Finally, apply the setOutputCharset Method to the second instance of EditLive!, specifying the ASCII character set. When running this code, users will be able to see the differences in the HTML extracted from the first editor instance (using the default UTF-8 output character set) and the second editor instance (using the ASCII character set).
<html>
<body>
<form name="exampleForm">
<p><textarea id="bodyContents" cols="80" rows="5"></textarea>
<br/><input type="button" value="Get <BODY> Contents" onclick="button1Press()"></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! Instance 2</p><p>Text with “Smart Quotes”</p>"));
editlivejava.show();
/** Function extracts the contents of the <body> field of the EditLive! HTML Document
* and displays this content in the textarea
*/
function button1Press() {
// the parameter passed to the GetBody method is the callback method the applet will call, passing
// the contents of the <BODY> attribute.
editlivejava.getBody('getEditLiveBody');
}
</script>
<p><input type="button" value="Get <BODY> Contents for the Second Instance of EditLive!" onclick="button2Press()"></p>
<script language="Javascript">
var editlivejava2 = new EditLiveJava("ELJApplet2", "700", "400");
editlivejava2.setConfigurationFile("../../redistributables/editlivejava/charEncoding.xml");
editlivejava2.setBody(encodeURIComponent("<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with “Smart Quotes”</p>"));
editlivejava2.setOutputCharset("ASCII");
editlivejava2.show();
function button2Press() {
// the parameter passed to the GetBody method is the callback method the applet will call, passing
// the contents of the <BODY> attribute.
editlivejava2.getBody('getEditLiveBody');
}
function getEditLiveBody(src) {
document.exampleForm.bodyContents.value = src;
}
</script>
</form>
</body>
</html>
See Also
- <sourceEditor> Configuration Element