EditLive! 9 Documentation : addEditableSection Method

Created by Jessica Hardy, last modified by Gavin Douglas on Jul 25, 2012

This property provides developers with a mechanism for editing multiple sections of HTML content in a webpage by utilizing a single instance of EditLive!.

For more information, see the Using Inline Editing article in the Developer Guide for this SDK, or undertake the Using Inline Editing tutorial. 

Syntax

JavaScript
editliveInstance.addEditableSection(divID[,textAreaID]);

Parameters

divID

The ID attribute for a HTML DIV. When a user clicks on this DIV, EditLive! will be loaded in its place, displaying the DIV's HTML contents. When the user clicks on any other DIV on the page registered via addEditableSection, the following occurs:

  1. EditLive! is replaced by its original DIV.
  2. The original DIV is populated with the contents seen in EditLive!.
  3. EditLive! now appears in place of the last DIV clicked, populated with this DIV's HTML contents.

textAreaID (optional)

The ID attribute for a HTML textarea, used internally by EditLive! to store and submit content.
This parameter is optional - it defaults to "divID_contentArea".
If this element is not found, it is created.
If this element is found, and has no "name" attribute, the name is set to "divID_contentArea".
As this element is used to submit content, its name determines the name of the HTTP form variable used to retrieve content.

If this element is found, its "value" attribute is used to load content. It takes precedence over the content inside the DIV. This is a more reliable method of loading content into the editable section than using the DIV content.

Like any HTML field, the textarea's "value" attribute must be HTML-encoded (not URL-encoded).

Examples

The following code will load a webpage featuring a DIV element with a dashed border (with an ID attribute of "dashedDiv1"). When the user clicks this DIV, an instance of EditLive! will load in place of the DIV. Any HTML inside the DIV will then be copied into the instance of EditLive! to allow users to edit this HTML.

JavaScript
<script language="Javascript" src="../../redistributables/editlivejava/editlivejava.js"/>
<div id="dashedDiv1" style="width: 600px; height: 400px; overflow: auto; border: 1px dotted gray; white-space:normal;">
</div>
<script language="Javascript">
       editlivejs = new EditLiveJava("ELApplet", "100%", "100%");
       editlivejs.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
       editlivejs.addEditableSection("dashedDiv1");
</script>

Remarks

The AddEditableSection load-time property should only be invoked on a DIV after the DIV has been defined within the page. The best way to accomplish this is to define a function which uses the AddEditableSection load-time property within the HEAD element of the document, and then set the onLoad property of your BODY or FRAMESET element to call this function. In most cases, this will work unless there is a delay loading the entire content. In these cases, it may be best to call the AddEditableSection load-time property function after the last DIV has been defined. It is also worth noting that if the form the DIVs are within is submitted when the DIVs have not been added, then the content within the DIV will not be submitted back to the server. If it is important that the data is submitted back even if it is unaltered, then DIVs should be added within the body prior to the definition of any submit functionality or at least after each DIV has been defined.

The following example depict how the AddEditableSection load-time property could be defined:

<html>
       <head>
               <script language="Javascript" src="../../redistributables/editlivejava/editlivejava.js"/>
               <script language="Javascript">
                       var editlivejs;
                       function loadEditLive() {
                               editlivejs = new EditLiveJava("ELApplet", "100%", "100%");
                               editlivejs.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
                               editlivejs.addEditableSection("div1");
                       }
               </script>                
       </head>
 
       <body onload="loadEditLive()">
               <div id="div1" style="width: 600px; height: 400px; overflow: auto; border: 1px dotted gray; white-space:normal;"><p>div content</p></div>                
       </body>
</html>

Any DIV element registered as an Inline Editing Section requires a fixed height. For example:

<script language="Javascript" src="../../redistributables/editlivejava/editlivejava.js"/>
<div id="dashedDiv1" style="width: 600px; height: 400px; overflow: auto; border: 1px dotted gray; white-space:normal;">
</div>
<script language="Javascript">
       editlivejs = new EditLiveJava("ELApplet", "100%", "100%");
       editlivejs.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
       editlivejs.addEditableSection("dashedDiv1");
</script>

If a fixed height is not specified for an Inline Editing Seciton DIV, clicking in the DIV will cause the Inline Editing Section to disappear from the page completely.

Finally, when using the addEditableSection API to integrate EditLive! into a webpage, the Show load-time property should not be invoked. When a user clicks a DIV registered with EditLive!, the editor will automatically be shown to the user in place of this DIV.

See Also