<!--
******************************************************
 
 charEncoding.html --
 
 This tutorial shows developers how to specify the encoding
 used to render content in EditLive!, as well as specify the
 encoding to use when extracting contents from EditLive!
 
 This tutorial instantiates to separate instances of EditLive!
 in the one webpage. One instance uses the default 'UTF-8' output
 character encoding, the other uses 'ASCII' output character
 encoding.
 
 Copyright © 2001-2006 Ephox Corporation. All rights reserved.
 See license.txt for license agreement
 
******************************************************
-->
<html>
       <head>
               <title>Tutorial - Specifying Character Encoding</title>
               <link rel="stylesheet" href="stylesheet.css">
               <!--
               Include the EditLive! JavaScript Library
               -->
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
       </head>
       <body>
 
               <h1>Specifying the Character Encoding Used by EditLive!</h1>
 
               <form name="exampleForm">
 
                       <p>This tutorial shows how to specify the following types of character encoding:</p>
 
                       <ul>
                               <li>The character encoding used to render the HTML inside of EditLive!</li>
                               <li>The character encoding used to extract the contents of EditLive!</li>
                       </ul>
 
                       <!--
                               The textarea used to display the HTML from the <body> of EditLive!'s HTML document.
                       -->
                       <textarea id="bodyContents" cols="80" rows="5">Use the respective buttons appearing in this page to view the different encoding methods applied to each of the EditLive! instances.</textarea>
 
                       <!--
                               The button for copying the <BODY> content from EditLive! and displaying this HTML in the textarea
                       -->
                       <p><input type="button" value="Get <BODY> Contents for the First Instance of EditLive!" onclick="button1Press()"></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/charEncoding.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! Instance 1</p><p>Text with &#8220;Smart Quotes&#8221;</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 <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.
                                       editlive.getBody('getEditLiveBody');
                               }
                       </script>
 
                       <!--
                               The button for copying the <BODY> content from EditLive! and displaying this HTML in the textarea
                       -->
                       <p><input type="button" value="Get <BODY> Contents for the Second Instance of EditLive!" onclick="button2Press()"></p>
 
                       <script language="Javascript">
                               // Create a new EditLive! instance with the name "ELApplet", a height of 400 pixels and a width of 700 pixels.
                               var editlive2 = new EditLiveJava("ELApplet2", 700, 400);
 
                               // This sets a relative or absolute path to the XML configuration file to use
                               editlive2.setConfigurationFile("../../redistributables/editlivejava/charEncoding.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()'
                               editlive2.setBody(encodeURIComponent("<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with &#8220;Smart Quotes&#8221;</p>"));
 
                               // Setting the output character set to use 'ASCII' encoding.
                               // If the setOutoutCharset property is not specified, the default encoding
                               // for character output is 'UTF-8'.
                               editlive2.setOutputCharset("ASCII");
 
                               // .show is the final call and instructs the JavaScript library (editlivejava.js) to insert a new EditLive! instance
                               //  at the this location.
                               editlive2.show();
 
                               /** Function extracts the contents of the <body> field of the EditLive! HTML Document
                                * and displays this content in the textarea
                                */
                               function button2Press() {
                                       // the parameter passed to the GetBody method is the callback method the applet will call, passing
                                       // the contents of the <BODY> attribute.
                                       editlive2.GetBody('getEditLiveBody');
                               }
 
                               /** Function utilised by both editor instances as a parameter passed to their 'GetBody' calls.
                                * this function creates a reference to the textarea on the page and inserts the contents of
                                * EditLive! into this textarea.
                                */
                               function getEditLiveBody(src) {
                                       document.exampleForm.bodyContents.value = src;
                               }
                       </script>
 
               </form>
       </body>
</html>