Custom and Scripting Tags Sample

Introduction

This page provides a demonstration of the handling of custom and scripting tags by Ephox EditLive! for Java.  It uses JavaScript code to create an instance of EditLive! for Java in a Web page.  The content which is loaded into this instance of EditLive! for Java contains various XML style custom tags, HTML comment tags and scripting tags.

Getting Started

Required Skills

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

Overview

This sample uses JavaScript almost identical to that used in the Basic JavaScript Sample.  The code has been modified slightly to load content into the applet which includes XML style custom tags, HTML comment tags and scripting code.  For more detailed information on instantiating EditLive! for Java using JavaScript please see the Basic JavaScript Sample.

XML style custom tags, HTML comment tags and scripting code are all rendered as images in the EditLive! for Java applet.  The content of these images varies depending on the tag concerned.  However, the images will all be rectangular with black text on a yellow background.

EditLive! for Java in customtagsample.htm

To embed EditLive! for Java 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>

The editlivejava.js file provides the interface to the EditLive! for Java .jar file (editlivejava.jar) which contains the source code.  This file can be found in the redistributables/editlivejava subdirectory of the EditLive! for Java webfolder directory.  It is recommended that you do not edit this file.

  1. Create a form to place an instance of EditLive! for Java in.
<form name="form1" method="POST">
  1. Create the EditLive! for Java object.
<script language="JavaScript">
    //create the EditLive! for Java object
    var editlivejava1;
    editlivejava1 = new EditLiveJava("ELJApplet1", "600", "400");
    //Set the xml configuration file location
    editlivejava1.setXMLURL("redistributables/editlivejava/sample_eljconfig.xml");
    //Set the location for the source files for EditLive! for Java
    editlivejava1.setDownloadDirectory("redistributables/editlivejava");
    //Set the location where the JRE should be downloaded from if necessary
    editlivejava1.setLocalDeployment(false);

This section of code creates an instance of EditLive! for Java within the page and invokes methods which affect how EditLive! for Java will be presented within the page.  For more information on each of the methods here (the constructor, setXMLURL, setBody, setDownloadDirectory, setLocalDeployment and show) see the Ephox EditLive! for Java JavaScript Reference. After each of the properties have been set the show() function is called.  This method causes the instance of EditLive! for Java just created to be displayed in the Web page.

  1. Set the body to include content containing XML style custom tags, HTML comment tags and scripting code.
Note: As the string value assigned to the setBody property is required to be a continuous line of code, not all of the line is shown in the code below.  However, a formatted version of this string does appear below the code for this step.

    //Set the initial contents of the applet
    editlivejava1.setBody(escape("<H1>This document includes multiple custom tags ..."));
    //Display the applet
    editlivejava1.show();
</script>
</form>

Formatted Listing of Applet Body Contents

<H1>This document includes multiple custom tags and scripting elements</H1>
<p><H2>The following tags are all of an XML style</H2>
<h3>This is a custom tag with no attributes and a body</h3>
<customTag>This is inside an XML style tag</customTag>
<h3>This is a custom tag with no body and one attribute</h3>
<tagWithAttrib attrib="test"/>
<h3>This is a custom tag with attributes and a body</h3>
<customTag attrib="test">This is inside an XML style tag</customTag></p>
<p><h2>The following tag is a HTML comment tag</h2>
<!--This is a HTML comment tag--></p>
<p><h2>The following tags demonstrate the usage of scripting languages such as ASP and PHP<h2>
<h3>This is an example of ASP or JSP style scripting</h3>
<%example.scripting%>
<h3>This is an example of PHP style scripting</h3>
<?example scripting?>
<h3>This is an example of JSTE style scripting</h3>
<#example scripting#></p>

Complete Code

The following is a listing of the code from the above steps:

<html>
    <head>
        <title>EditLive! for Java Sample Form</title>
    </head>
    <body>
        <h1>Ephox EditLive! for Java Basic JavaScript Sample</h1>
        <p>This is a basic example of EditLive! for Java in a web page </p>
        <script src="../../redistributables/editlivejava/editlivejava.js"></script>
        <form name="form1" method="POST">
            <table cellpadding="0" cellspacing="5">
                <tr valign="top">
                    <td>EditLive! for Java Applet:</td>
                    <td>
                    <script language="JavaScript">
                        var editlivejava1;
                        editlivejava1 = new EditLiveJava("ELJApplet1", "600", "400");
                        editlivejava1.setXMLURL("../../redistributables/editlivejava/sample_eljconfig.xml");
                        editlivejava1.setDownloadDirectory("../../redistributables/editlivejava");
                        editlivejava1.setLocalDeployment(false);
                        editlivejava1.setCookie("");
                        editlivejava1.setBody(escape("<H1>This document includes multiple custom tags and scripting elements</H1><p><H2>The following tags are all of an XML style</H2><h3>This is a custom tag with no attributes and a body</h3><customTag>This is inside an XML style tag</customTag><h3>This is a custom tag with no body and one attribute</h3><tagWithAttrib attrib='test'/><h3>This is a custom tag with attributes and a body</h3><customTag attrib='test'>This is inside an XML style tag</customTag></p><p><h2>The following tag is a HTML comment tag</h2><!--This is a HTML comment tag--></p><p><h2>The following tags demonstrate the usage of scripting languages such as ASP and PHP<h2><h3>This is an example of ASP or JSP style scripting</h3><%example.scripting%><h3>This is an example of PHP style scripting</h3><?example scripting?><h3>This is an example of JSTE style scripting</h3><#example scripting#></p>"));
                        editlivejava1.show();
                    </script>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Editing Custom Tags

In order to edit custom, comment or scripting tags the shrtEditTag shortcut menu item is required to be added to the shortcut menu.  This may be done by creating an EditLive! for Java XML configuration file with the following included in it:

<editLiveForJava>
    ...
    <shortcutMenu>
        <shrtMenu>
        ...
            <shrtMenuItem name="shrtEditTag"/>
        ...
        </shrtMenu>
    </shortcutMenu>
</editLiveForJava>

Once these configuration options have been added to the XML configuration for EditLive! for Java users may right click on the custom tags in order to edit them.  Conversely, if you do not wish users to be able to edit custom, comment or scripting tags then do not add this option to the XML configuration.

Summary

EditLive! for Java provides support for editing documents with custom tags in them as well as allowing the user to edit them and move them around in the document.  This example demonstrates how EditLive! for Java renders custom tags and how they can be edited. 

See Also