EditLive! 9 Documentation : Integrating EditLive! in 3 Lines

Created by Damien Fitzpatrick, last modified on Jun 06, 2013

This article assumes that you've deployed EditLive! to your web server and you're ready to start integrating EditLive!.

The editlivejava directory now hosted on your web server includes all the files you need to get started with creating your own EditLive! integration.

This example takes you through the steps needed to put an instance of EditLive! into a web page.

The integration method used in this example is ideal when integrating EditLive! within a basic web form that requires rich text editing.  It requires very little JavaScript and provides an active EditLive! instance in the location that the show method is called.

1. Start with a Basic HTML Page

Basic HTML Page
<html>
	<head>
		<title>Simple 3 Line Integration</title>
	</head>
	<body>
	<h1>EditLive! will appear here</h1>
	</body>
</html>

2. Include the EditLive! JavaScript Library

The EditLive! JavaScript library includes all the code necessary to create an EditLive! instance.  Even though EditLive! is a Java applet you never need to interact with Java directly, everything you need is handled by the JavaScript library.

In this case the location of the JavaScript library is given by editlivejava/editlivejava.js.  You will need to adjust this URL depending on location of the EditLive! source files on your web server.

Include the EditLive! JavaScript Library
<head>
	<title>Simple 4 Line Integration</title>
	<!-- Inline the EditLive! JavaScript Library -->
	<script src="editlivejava/editlivejava.js" language="JavaScript"></script>
</head>

3. Create, Configure and Show the EditLive! Instance

Now we will add the code to create an instance of EditLive!.  

By default the instance of EditLive! will be configured using the sample configuration file contained in the editlivejava directory along with the editor source files.

The show method is called which creates the instance of EditLive! in the page based on the information passed in via the constructor and configuration file.

Create, Configure and Show EditLive!
<h1>EditLive! will appear here</h1>
<!-- Create, Configure and Show the EditLive! Instance -->
<script type='text/javascript'>
	// Create a new EditLive! instance with the name "ELApplet", a height of 400 pixels and a width of 700 pixels.
	var editlive = new EditLiveJava("ELApplet", 700, 400);

	// .show is the final call and instructs the JavaScript library (editlivejava.js) to insert a new EditLive! instance
	//  at the this location.
	editlive.show();
</script>

Complete Code Example

Create, Configure and Show EditLive!
<html>
	<head>
		<title>Simple 3 Line Integration</title>
		<!-- Inline the EditLive! JavaScript Library -->
		<script src="editlivejava/editlivejava.js" language="JavaScript"></script>
	</head>
	<body>
	<h1>EditLive! will appear here</h1>
	<!-- Create, Configure and Show the EditLive! Instance -->
	<script type='text/javascript'>
		// Create a new EditLive! instance with the name "ELApplet", a height of 400 pixels and a width of 700 pixels.
		var editlive = new EditLiveJava("ELApplet", 700, 400);

		// .show is the final call and instructs the JavaScript library (editlivejava.js) to insert a new EditLive! instance
		//  at the this location.
		editlive.show();
	</script>
	</body>
</html>