Getting Started

Required Skills

The following skills are required prior to working with this tutorial:

Basic client-side JavaScript
Basic knowledge of XML

Required Tutorials Completed

The following tutorials are required to be undertaken before attempting this tutorial:

Custom Toolbar Buttons in the Applet Tutorial

Tutorial

Step 1. Create an Instance of EditLive!

Using the load-time properties described in the Instantiation Tutorial, create an instance of EditLive!:

<html>
       <body>
               <h1>Using a Simple Plugin</h1>
               <!--
               Include the EditLive! JavaScript Library
               -->
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
               <!--
               The instance of EditLive!
               -->
               <script language="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);
 
                       // This sets a relative or absolute path to the XML configuration file to use
                       editlive.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
 
                       // .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>

Save this webpage as simplePlugin.html.

Step 2. Create a Javascript File to Interact with EditLive!

Create a new Javascript file called plugin.js. This Javascript file should contain the following code:

a Javascript alert. This alert will appear as soon as the Javascript file is loaded by the referencing webpage.
a Javascript function for inserting HTML into EditLive!.

alert("plugin.js has loaded.");
 
/** This function is called to from the mockDialog.html window.
 *
 */
function insertString() {
       editlive.insertHTMLAtCursor(encodeURIComponent("<b>HTML Inserted by Plugin</b>"));
}

Step 3. Create a Plugin XML File

EditLive! loads plugins based on a Plugin XML file. For detailed information on the elements of these Plugin XML files, see the Plugin XML Elements section of the Reference Guide for this SDK.

Create an .xml file called simplePlugin.xml. Create an empty Plugin XML structure featuring only a <plugin> element. Specify the load attribute as immediate. This will ensure that the desired Javascript is available as soon as EditLive! has loaded.

<?xml version="1.0" encoding="US-ASCII" ?> 
<plugin load="immediate">
</plugin>

Step 4. Reference the Javascript File in the Plugin XML

Use the Plugin XML to create a <script> element that references the plugin.js file.

<?xml version="1.0" encoding="US-ASCII" ?> 
<plugin load="immediate">
   <script src="plugin.js"/>
</plugin>

Step 5. Create a Custom Menu Item to be Displayed in the Plugins Menu

In the Custom Toolbar Buttons in the Applet Tutorial you've seen how custom toolbar or menu items can be easily added to EditLive! via the Configuration File. This same logic can be applied to the <menu> element available in the Plugin XML. Any child elements found in a Plugin XML <menu> element will be added to the Plugin menu in EditLive!.

Add a <customMenuItem> to simplePlugin.xml that will perform the following:

Display a menu item titled Call to Javascript.
When clicked, this menu item will call the Javascript function in plugin.js called insertString().

<?xml version="1.0" encoding="US-ASCII" ?> 
<plugin load="immediate">
       <menu>
                  <customMenuItem name="plugin1" action="raiseEvent" value="insertString" text="Call to Javascript" imageURL="images/small_logo.gif"/> 
       </menu>
 
       <script src="plugin.js" />
</plugin>

Step 6. Register the Plugin With EditLive!

In the simplePlugin.html file, add a call to the addPlugin Method. Pass the URL for the simplePlugin.xml file as a parameter.

<html>
       <body>
               <h1>Using a Simple Plugin</h1>
               <!--
               Include the EditLive! JavaScript Library
               -->
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
               <!--
               The instance of EditLive!
               -->
               <script language="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);
 
                       // This sets a relative or absolute path to the XML configuration file to use
                       editlive.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
 
                       // specifying the plugin to use with EditLive!
                       editlive.addPlugin("../../examplePlugins/simplePlugin.xml");
 
                       // .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>

EditLive! 9 Documentation : Simple Plugin Tutorial