This method loads HTML content into a specified Inline Editing section (represented either by a DIV or an instance of EditLive!).
For more information on the Inline Editing functionality for EditLive!, see the Using Inline Editing article.
Syntax
JavaScript
editliveInstance.setContentForEditableSection(divID, html);
Parameters
divID
This parameter is required.
The ID attribute for the DIV registered as an inline editing section with EditLive! (via the addEditableSection Method).
html
This parameter is required.
The HTML to be inserted into the inline editing section (represented by either a DIV or an instance of EditLive!). This HTML can be either a HTML fragment or an entire HTML document.
The value of the html parameter must be URL encoded. It is recommended that a server-side URL encoding function be used if available as the JavaScript encodeURIComponent function does not fully comply with the URL encoding standard.
Example
The following code creates a webpage featuring a DIV. This DIV is registered with EditLive! as an inline editing section. The Load Content button will load the text New Content into the inline editing section.
If the user clicks the DIV, EditLive! will load in its place. Clicking the Load Content button would then load the string New Content into the editor instance.
If the user does not click the DIV, pressing Load Content will load to the string New Content into the DIV itself.
<HTML>
<HEAD>
<TITLE>EditLive! JavaScript Example</TITLE>
<!--Include the EditLive! JavaScript Library-->
<SCRIPT src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"/>
<SCRIPT language="JavaScript">
function loadEditableSectionContent(){
editlive_js.setContentForEditableSection('div1', encodeURIComponent('<p><b>New Content</b></p>'));
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name = exampleForm>
<P>Click the section below to edit it's contents.</P>
<DIV id="div1" style="width: 600px; height: 400px; overflow: auto; border: 1px dotted gray; white-space:normal;">
</DIV>
<P>Click the following button to load the text <b>New Content</b> into the editable section: <INPUT type="button"
name="divButton"
value="Load Content"
onClick="loadEditableSectionContent();" >
</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>