EditLive! 9 Documentation : Using Custom Tags

EditLive! for Java Swing allows for the easy editing of HTML content by users. In some circumstances, however, content is not purely HTML and may contain custom tags or tags which are not defined in HTML. Examples are pages which include XML and Java Server Pages (JSP) tags. EditLive! for Java Swing recognizes the usage of such tags within a document, parses them, and renders them so that the user is aware of their existence.

Custom Tag Identification

EditLive! for Java Swing identifies custom tags within HTML content placed in EditLive! for Java Swing. In the design view of EditLive! for Java Swing, custom tags are represented by an image of a yellow rectangle within which the tag name is displayed. Users can edit the custom tag by right-clicking on the tag and selecting Edit Tag.... Please note that it is not possible to add extra HTML before or after the custom tag using this method.

When loading custom tags of the format <custom>tag body</custom> (i.e. tags with a body) into EditLive! for Java Swing, both the start and end tags will be recognized by EditLive! as custom tags and displayed as such. The body of the tag, in this case tag body, will be placed between the two custom tag representations and the user will be able to edit this content as they would any other content within EditLive! for Java Swing. <SCRIPT> tags, however, are an exception to this. These are displayed as a single script custom tag in EditLive! for Java Swing and the user must specifically edit the tag via the shortcut menu to make changes to the script.

Custom Tag Support

EditLive! for Java Swing supports any custom tag that is correctly formatted. For instance the following tags are supported:

• <custom>
• <custom tag="My Tag">
• <custom tag>
• </custom>
• <% asp script %>
• <? php script ?>
• <script language="JavaScript">JavaScript</script>

The following tags will not work correctly:

• <Unclosed Tag
• <? Incorrectly closed PHP >
• <% Incorrectly closed ASP >
• <script language="JavaScript">Unclosed JavaScript

Notice that all of these unsupported tags are either unclosed or incorrectly closed. Ensuring that all tags are correctly closed will avoid such problems.

Working with Custom Tags

Custom tags can be moved in the document just like any other element - including cutting, copying, pasting, and deleting. Users can also edit the custom tag by right clicking on the tag and selecting Edit Tag... from the shortcut menu if it is present. EditLive! for Java Swing maintains the case of custom tags throughout all operations. If EditLive! for Java Swing is set to indent HTML, then each line within a custom tag will be indented to the same level; however, if EditLive! for Java Swing is set to not indent HTML then the original indentation of the custom tag will be maintained.

Unknown Custom Tags

EditLive! for Java Swing presents unknown custom tags (i.e. those not registered within EditLive! for Java Swing) as an image of a tag with a yellow background. Unknown tags are ignored by the EditLive! for Java Swing parser. For a custom tag to be affected by the EditLive! for Java Swing parser it must be registered with EditLive! as described in the following section.

Registering Custom Tags

Developers can register custom tags with EditLive! for Java Swing so that they may be rendered and parsed in a specific manner. This enables developers to ensure that custom tags are used as either block, inline or empty tags and presented to users in a specific manner.

Using CSS With Registered Custom Tags

Developers can specify the rendering of registered custom tags within EditLive! for Java Swing through the use of Tiny (Ephox) CSS extensions. To register a custom tag in this manner it must be declared within either the external or embedded style sheet for the page. The custom tag is declared by including a specific CSS style for that tag and setting the display attribute for the tag to either block, inline or empty, which then determines how the tag is parsed.

The following example demonstrates how a custom tag called MyTagcan be registered with EditLive! for Java Swing as a inline tag; the example also sets attributes relating to the appearance of the custom tag.

MyTag{
   display: inline;
   ephox-icon: url(http://www.server.com/icons/myicon.jpg);
   ephox-start-label: Custom Tag;
   ephox-end-label: /Custom Tag;
}

For more information on using Ephox CSS to render custom tags, see the Using CSS Extensions to Render Custom Tags article

Using the Register Custom Tag method of the ELJBean class

The ELJBean java class (which creates an instance of EditLive! for Java Swing in java) contains methods to register either block, inline or empty tags. When registering a tag using this method, the developer can specify the following values:

• • Start Label - A string to represent the beginning of the custom tag
  • End Label - A string to represent the end of the custom tag
  • Start icon - An Icon to represent the beginning of the custom tag
  • End Icon - An Icon to represent the end of the custom tag
  • ViewClickListener - A class that will respond to the custom tag being clicked (this class could display a dialog or automatically change the custom tag's attributes)
  • For more information, see the Java Swing APIs packaged with this SDK.

See Also

• Using CSS Extensions to Render Custom Tags