EditLive! 9 Documentation : getContentForEditableSection Method

This method retrieves the contents of a specified Inline Editing Section. Before content is returned, this function ensures all local images in the content are uploaded by calling uploadImages.

For more information on the Inline Editing functionality for EditLive!, see the Using Inline Editing article.

In EditLive! 8.0, the getContentForEditableSection function will return a HTML fragment or a HTML document depending on the content used to populate the Inline Editing section.

In EditLive! 8.1 and above, the getContentForEditableSection function returns content according to the setReturnBodyOnly setting.

For information on populating Inline Editing sections see the Using Inline Editing article.

Syntax

JavaScript
editliveInstance.getContentForEditableSection(divID);

Parameters

divID

This parameter is required.

The ID attribute for the DIV registered as an inline editing section with EditLive! (via the addEditableSection Method).

Example

The following code creates a webpage featuring a DIV. This DIV is registered with EditLive! as an inline editing section. The Display Content button will display the current HTML for the inline editing section.

If the user clicks the DIV, EditLive! will load in its place. Clicking the Display Content button would then load the current contents of the editor to the screen.

If the user does not click the DIV, pressing Display Content will load the contents of the DIV itself to the screen.

<HTML>
   <HEAD>
      <TITLE>EditLive! JavaScript Example</TITLE>
      <!--Include the EditLive! JavaScript Library-->
      <SCRIPT src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"/>
      <SCRIPT language="JavaScript">
         function displayEditableSectionContent(){
                       var contentRef = editlive_js.getContentForEditableSection('div1');
 
            alert("Editable Section Content: " + editlive_js.getContentForEditableSection('div1'));
         }
      </SCRIPT>
   </HEAD>
   <BODY>
      <FORM name = exampleForm>
         <P>Click the section below to edit its contents.</P>
          <DIV id="div1" style="width: 600px; height: 400px; overflow: auto; border: 1px dotted gray; white-space:normal;"><p>default editable section content</p></DIV>
         <P>Click the following button to display the content for the editable section: <INPUT type="button"
               name="divButton"
               value="Display Content"
               onClick="displayEditableSectionContent();" >
         </P>
      </FORM>
      <SCRIPT language="JavaScript">
         var editlive_js = new EditLiveJava("editlive", "100%", "100%");
         editlive_js.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
         editlive_js.addEditableSection('div1');
      </SCRIPT>
   </BODY>
</HTML>

See Also