Getting StartedÂ
Required Skills
The following skills are required prior to working with this tutorial:
- Basic client-side JavaScript
Required Tutorials Completed
The following tutorials are required to be undertaken before attempting this tutorial:
Tutorial
Step 1. Create a Webpage Featuring Your Inline Editing Sections
Any section of your webpage you wish a user to edit (i.e. an inline editing section) must be nested in a HTML DIV element. For this tutorial, create a webpage named inlineEditing.html with two DIV elements for the user to edit (as seen below with DIV elements content1 and content2).
<html>
<body>
<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: 600px; 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: 600px; 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>
</body>
</html>
Step 2. Define a Javascript Method to be Invoked When the Page Loads
Create a Javascript method called initializeEditableSections() in the HEAD of the HTML document.
<html>
<head>
<script language="Javascript">
function initializeEditableSections() {
}
</script>
</head>
<body>
<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: 600px; 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: 600px; 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>
</body>
</html>
Specify the initializeEditableSections() method to be call in the BODY elements onload event handler.
<html>
<head>
<script language="Javascript">
function initializeEditableSections() {
}
</script>
</head>
<body onload="initializeEditableSections();">
<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: 600px; 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: 600px; 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>
</body>
</html>
Step 3. Define the Required EditLive! Properties
Use the initializeEditableSections() javascript method to define the required properties for the editor (i.e. the DownloadDirectory and ConfigurationFile load-time properties). Ensure you also specify the inlineEditing.js required to implement the Inline Editing functionality.
<html>
<head>
<script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript" type="text/javascript"></script>
<script language="Javascript">
var editlive_js;
function initializeEditableSections() {
editlive_js = new EditLiveJava("editlive", "100%", "100%");
editlive_js.setConfigurationFile("sample_eljconfig.xml");
}
</script>
</head>
<body onload="initializeEditableSections();">
<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: 600px; 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: 600px; 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>
</body>
</html>
Note that the width and height for EditLive! have been set to 100%. This will ensure that when EditLive! is applied to one of the defined DIVs the editor will size to perfectly within the DIV.
The editlive_js variable is also defined outside of the initializeEditableSections() function. This will ensure that any Run Time Methods to be used with EditLive! for Java will operate correctly.
Step 4. Register the Inline Editing Sections with EditLive!
Use the addEditableSection Method to register both the content1 and content 2 DIVs with EditLive!.
<html>
<head>
<script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript" type="text/javascript"></script>
<script language="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();">
<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: 600px; 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: 600px; 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>
</body>
</html>
When using the addEditableSection Method there's no need to call the show Method load-time property. Clicking in a DIV registered with EditLive! will automatically invoke Show for that DIV to create an instance of the editor.
You also don't need to populate the contents of EditLive! using either the Body or Document load-time properties. Clicking in a registered DIV will automatically populate EditLive! with the contents of that DIV.
Step 5. Embed the Inline Editing Sections in a HTML Form
Posting the form created in this tutorial will only work if you are running this tutorial on an environment running IIS.
Finally, embed the contents of the BODY element inside a HTML FORM. This form will allow users to post the contents of their inline editing sections to the posthandler.asp script supplied with this tutorial.
<html>
<head>
<script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript" type="text/javascript"></script>
<script language="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: 600px; 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: 600px; 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>
</form>
</body>
</html>
When submitting a form with inline editing sections, the contents of each inline editing section will be passed to the post acceptor script as a POST argument with a name the same as the ID for the inline editing section DIV itself.
For this tutorial, when a user submits the FORM, inline editing section content1 will be passed to posthandler.asp as a POST arguement called content1. Similarly, inline editing section content2 will be passed to posthandler.asp as a POST argument called content2.