This article briefly takes you through how to rapidly integrate EditLive! into your application. A textarea in a page is replaced with EditLive! (source for the starting page available here — right click and save as in IE to view the source). The name of the text field we are replacing in this example is "web_content".  The form in the page submits to a basic debugging page (source available here). To skip straight to the ending, you can see the resulting html.  To see the simple four steps, start now.

Step 1) Register and Download the EditLive! (http://www.ephox.com/products/editlive/download.html).

Step 2) Copy the editlivejava redistributables to your server to a folder called editlivejava (if you downloaded the zip package you will find this in editliveforjava/webfolder/redistributables/editlivejava)

Step 3) include the EditLive! javascript source in your html page:
<script type="JavaScript" src="editlivejava/editlivejava.js"></script>

Step 4) Create a script block to create and setup an instance of EditLive!, a simple construction would consist of:

• create an instance of edit live called web_content with a height of 600 and a width of 550 pixels:
  var editliveInstance = new EditLiveJava("web_content", 600, 550);
• set the download directory (the location where the jar file containing the applet lives)
  editliveInstance.setDownloadDirectory("editlivejava");
• set the content for the editor (encoding it so any html will carry across happily):
  editliveInstance.setBody(encodeURIComponent("text for the content"));
• set the configuration file (start with the sample one).
  editliveInstance.setConfigurationFile("editlivejava/sample_eljconfig.xml");
• display the applet
  editliveInstance.show();

This will produce a simple integration of the EditLive! editor into your web page. The contents of the body will be available in the field web_content.  It is then possible to update the configuration file to take advantage of the large number of customisation options available.

This entry is filed under Integrating EditLive!. You can follow any responses to this entry through the Atom feed. You can leave a response, or trackback from your own site.