Page tree
Skip to end of metadata
Go to start of metadata
<!--
******************************************************
 
 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 &lt;BODY&gt; 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 &lt;BODY&gt;.</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 &lt;BODY&gt; 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>
  • No labels