Created by Jessica Hardy, last modified by Kristin Repsher on May 14, 2012 
<!--
******************************************************
 
 inlineEditing.html --
 
 This tutorial shows developers how to use the Editable Section
 APIs available to EditLive! to use only one instance of EditLive!
 for editing across several rich text sections.
 
 Copyright © 2001-2007 Ephox Corporation. All rights reserved.
 See license.txt for license agreement
 
******************************************************
-->
<html>
       <head>
               <title>Tutorial - Using Inline Editing for Content Editing</title>
               <link rel="stylesheet" href="stylesheet.css">
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript" type="text/javascript"></script>
               <script language="JavaScript" type="text/javascript">
                       var editlive_js;
                       function initializeEditableSections() {
                               editlive_js = new EditLiveJava("editlive", "100%", "100%");
                               editlive_js.setConfigurationFile("sample_eljconfig.xml");
                               editlive_js.addEditableSection("content1");
                               editlive_js.addEditableSection("content2");
                       }
               </script>
 
       </head>
       <body onLoad="initializeEditableSections();">
               <form nane="form1" action="posthandler.asp" method="post">
                       <h1>Using Inline Editing for Content Editing</h1>
 
                       <p>This tutorial shows how to use the EditLive! Inline Editing APIs to easily edit and view content.</p>
 
                       <p>Click in any section of the page with a grey border to load the selected content into EditLive!</p>
 
                       <div id="content1" style="border: 1px solid gray; width: 650px; height: 500px; overflow: auto;">
                               <h1>Inline Editing Section 1</h1>
                               <p>This is the content for the <i>first</i> inline editing section</p>
                       </div>
 
                       <p>This content between the DIVs will not be editable.</p>
 
                       <div id="content2" style="border: 1px solid gray; width: 650px; height: 500px; overflow: auto;">
                               <h1>Inline Editing Section 2</h1>
                               <p>This is the content for the <i>second</i> inline editing section.</p>
                               <ol>
                                       <li>The DIV can contain any HTML content, including lists, tables, images and links.</li>
                               </ol>
                       </div>
 
                       <p>Click this button to submit the form and display the contents of each inline editing section
                       <input type="submit" value="Submit Form"/></p>
 
                       <p><b><i>Note:</i></b> The form will only submit if you are running this page from an IIS server.</p>
               </form>
       </body>
</html>