The following skills are required prior to working with this example:
- Basic ColdFusion
This example demonstrates how to perform the following with EditLive! and ColdFusion:
- Invoke methods and set parameters effecting the appearance of EditLive!.
- Load a document into EditLive! from a ColdFusion variable.
To embed EditLive! within a Web page several steps are required. Each of these steps is explained here and code samples are provided.
1. Include the editlivejava.js file
<script src="../../redistributables/editlivejava/editlivejava.js"> </script>
3. Create a new instance of the EditLive! object. When creating the EditLive! object, the name of the form field for the applet, in addition to the width and height, are declared. In this example, the form field for the applet is ELApplet1, the width of the applet is 700 pixels, and the height is 600 pixels.
// Create a new EditLive! instance with the name // "ELApplet1", a height of 600 pixels and a width of 700 pixels. editliveInstance = new EditLiveJava("ELApplet1", 700, 600);
4. Set the path to the source files for EditLive!. These can be found in the EDITLIVE_INSTALL/webfolder/redistributables/editlivejava directory.
// This sets a relative path to the directory where // the EditLive! redistributables can be // found e.g. editlivejava.jar editliveInstance.setDownloadDirectory( "../../redistributables/editlivejava");
5. Load the EditLive! configuration file into a string and set the configuration text.
<!--- Load the configuration file on the server to speed up loading ---> <cfset configpath=ExpandPath("sample_eljconfig.xml")> <cffile action="read" file="#configpath#" variable="xmlConfig"> <cfoutput> editliveInstance.setConfigurationText("#URLEncodedFormat(xmlConfig)#"); </cfoutput>
URLEncodedFormat must be used to output the variable; for more information see the article on Encoding Content for Use with EditLive!.
6. Set the content for the applet via the setBody Method (the setDocument Method may also be used). The content must be URL encoded. The following example will first set the variable contents to "<p>Document contents of EditLive!</p>" and then set the content of EditLive! to the contents of the variable contents.
<cfset contents="<p>This is the initial source</p>"> <cfoutput> editliveInstance.setBody("#URLEncodedFormat(contents)#"); </cfoutput>
The contents variable can contain any HTML fragment - for example, content loaded from a database. Note that URLEncodedFormat must be used to output the variable; for more information see the article on Encoding Content for Use with EditLive!.
7. Display the EditLive! applet and close the script element.