The integration method used in this example is ideal when integrating EditLive! in a dynamically generated page, a page with existing content or when you require multiple editor instances within a page. It requires very little JavaScript and enables you to very easily create and manage multiple editor instances.

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 by replacing existing DIV elements on the page.

1. Start with an Existing HTML Page that Contains DIVs

Start with a HTML page that includes DIVs. These elements will be replaced with editable sections in this example.

HTML Page

<html>
<head>
<title>EditLive Demonstrations</title>
</head>
<body>
	<h1 style="text-align:center;">EditLive! Demonstrations</h1>	
	<div style='width:700px;margin:auto'>
		<h2 style=" text-align: left;">EditLive! - Works Like a Rich Text Editor Should</h2>
		<p><em>EditLive! is the rich text editor that works like a rich text editor should. No reformatting. No stress. No kidding.</em></p>
		<p><strong>Copy and paste</strong>&#160;content seamlessly, no matter where your content comes from: Microsoft Word, Excel or any web site.</p>
		<p><strong>Image editing</strong> is a breeze with EditLive!'s built in image editor.</p>
		<p><strong>Avoid mistakes. </strong> EditLive! includes out of the box capabilities such as <strong>spell check as you type</strong>, a&#160;<strong>thesaurus</strong>&#160;and&#160;<strong>hyperlink checking</strong>. And you get all of this without the need to license, install or configure any third party software.</p>
	</div>
	<p>&nbsp;</p>
	<div style='width:700px;margin:auto'>
		<h2>Make Image Editing a Breeze</h2>
		<p>With a&#160;<strong>built-in image editor</strong>, EditLive! makes editing images a breeze.</p>
		<p>EditLive! is the only online rich text editor that enables you to:</p>
		<ul>
		<li>Resize and resample images</li>
		<li>Crop</li>
		<li>Rotate left and right</li>
		<li>Flip vertically and horizontally</li>
		<li>Add rounded corners, drop shadow and reflection effects</li>
		</ul>
</div>
</body>
</html>

2. Include the EditLive! JavaScript Library

Include the EditLive! JavaScript library.

Note: You will need to adjust the URL for the script to map to the location of the editlivejava directory on your web server, based on your EditLive! deployment

Include the EditLive! JavaScript Library

<script type="text/javascript" src="editlivejava/editlivejava.js"></script>

3. Add IDs to DIVs

Add IDs to the DIVs so that they can be addressed by the EditLive! JavaScript library. These IDs will be used to identify the DIVs that are to be replaced by EditLive!

Add IDs to DIVs

<div style='width:700px;margin:auto' id="FirstDIV">
 
...
 
<div style='width:700px;margin:auto' id="SecondDIV">

4. Create and Configure EditLive! Instances

Now construct an EditLive! instance and assign it to the DIVs.

Create and Configure EditLive! Instances

<script type="text/javascript">
	//Create an EditLive! instance
	editlive = new EditLiveJava("ELApplet");
	//Assign the EditLive! instance to work with the named DIVs in the content
	editlive.addEditableSection("FirstDIV");
	editlive.addEditableSection("SecondDIV");
</script>

Complete Code