EditLive! 9 Documentation : Using CSS Extensions to Render Custom Tags

EditLive! includes extensive support for the embedding of custom tags within HTML. As part of the support for custom tags in HTML, developers can provide custom rendering for these tags. Tiny (Ephox) CSS extensions can be used to customize the rendering of these tags. The styles with which custom tag rendering is specified in EditLive! can be provided either as an external, linked style sheet or through an embedded style sheet. Please see the section on Using CSS in EditLive! for more information on using style sheets with EditLive!.

Specifying Rendering for a Custom Tag 

A CSS style can be used to specify the way in which a custom tag is to be rendered. The style should match the name of the custom tag. Developers can specify whether the custom tag is rendered as an inline (e.g. <SPAN>), block (e.g. <P>), or empty tag (e.g. <IMG>). Furthermore, icons and labels can be specified to be used for rendering the tag.

Example
The following example demonstrates how to specify rendering information for the custom tag <MyTag> and its closing tag </MyTag>. The start icon starticon.jpg (mapped to by the URL http://www.server.com/icons/starticon.jpg), the end icon endicon.gif (mapped to by the URL http://www.server.com/icons/endicon.jpg), the start label Custom Tag and end label /Custom Tag are specified for rendering the custom tag. Also, the custom tag is displayed as a block tag.

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

MyTag Custom Tag With No CSS Rendering

MyTag Custom Tag With CSS Rendering

CSS Extensions for Custom Tags

The Tiny (Ephox) CSS extensions can be implemented in either an external style sheet or an embedded element style sheet.

display CSS Attribute
ephox-start-icon CSS Attribute
ephox-start-label CSS Attribute
ephox-end-icon CSS Attribute
ephox-end-label CSS Attribute
ephox-icon CSS Attribute
ephox-label CSS Attribute

display Attribute

Description
The display attribute specifies what type of rendering area should be allocated to the relevant tag. It also affects the way in which EditLive! interprets the tag when parsing the content.

Permitted Values
block
The tag and content are displayed. Custom block tags will not be automatically wrapped within other tags.
inline
The tag and content are displayed. The tag must contain content; otherwise, it will be removed. Custom inline tags will be automatically wrapped within a block tag (i.e. <P>).
empty
Only the tag is displayed. This display type should only be used with custom tags that do not contain content.

Example
The following example specifies that the custom tag <MyTag> is to be rendered and interpreted as an inline tag and will be rendered with the label Custom Tag.

 
MyTag{
   display: inline;
   ephox-label: Custom Tag;
}

ephox-start-icon Attribute

Description
This CSS attribute can be used to specify the icon used for an opening custom tag (e.g. <CustomTag>). This attribute should not be used with an empty tag. The icon for empty tags can be specified through the ephox-icon attribute.

Permitted Values
url
A URL which maps to an image which is to be used as the icon for this custom tag. This URL can be either relative or absolute. If relative URLs are specified they are resolved in relation to either the BaseURL load-time property (if specified) or the page in which EditLive! is embedded (if the BaseURL load-time property is not specified).

Example
The following example specifies the image icons/starticon.gif for the start tag icon and icons/endicon.gif for the end tag icon of the custom tag <MyTag>.

 
MyTag{
   display: block;
   ephox-start-icon: url(icons/starticon.gif);
   ephox-end-icon: url(icons/endicon.gif);
}

ephox-start-label Attribute

Description
This CSS attribute can be used to specify the label used for an opening custom tag (e.g. <CustomTag>). This attribute should not be used with an empty tag. The label for empty tags can be specified through the ephox-label attribute.

Permitted Values
label
A label to be used with the opening tag of a custom tag.

Example
The following example specifies the label Custom Tag for the start tag label and /Custom Tag for the end tag label of the custom tag <MyTag>.

 
MyTag{
   display: block;
   ephox-start-label: Custom Tag;
   ephox-end-label: /Custom Tag;
}

ephox-end-icon Attribute

Description
This CSS attribute can be used to specify the icon used for a closing custom tag (e.g. </CustomTag>). This attribute should not be used with an empty tag. The icon for empty tags can be specified through the ephox-icon attribute.

Permitted Values
url
A URL which maps to an image which is to be used as the icon for this custom tag. This URL can be either relative or absolute. Relative URLs are resolved in relation to either the BaseURL load-time property (if specified) or the page in which EditLive! for Java is embedded (if BaseURL is not specified).

Example
The following example specifies the image icons /starticon.gif for the start tag icon and icons /endicon.gif for the end tag icon of the custom tag <MyTag>.

 
MyTag{
   display: block;
   ephox-start-icon: url(icons/starticon.gif);
   ephox-end-icon: url(icons/endicon.gif);
}

ephox-end-label Attribute

Description
This CSS attribute can be used to specify the label used for a closing custom tag (e.g. </CustomTag>). This attribute should not be used with an empty tag. The label for empty tags can be specified through the ephox-label attribute.

Permitted Values
label
A label to be used with the end of a custom tag.

Example
The following example specifies the label Custom Tag for the start tag label and /Custom Tag for the end tag label of the custom tag <MyTag>.

 
MyTag{
   display: block;
   ephox-start-label: Custom Tag;
   ephox-end-label: /Custom Tag;
}

ephox-icon Attribute

Description
This CSS attribute can be used to specify the icon used for a custom tag. If using this attribute with either block or inline tags then it should be used instead of the ephox-start-icon and ephox-end-icon attributes. When specifying an icon to represent an empty tag this attribute must be used.

Permitted Values
url
A URL which maps to an image which is to be used as the icon for this custom tag. This URL can be either relative or absolute. Relative URLs are resolved in relation to either the BaseURL load-time property (if specified) or the page in which EditLive! for Java is embedded (if BaseURL is not specified).

Example
The following example specifies the image icons/icon.gif for the start and end tag icons of the custom tag <MyTag>.

 
MyTag{
   display: block;
   ephox-icon: url(icons/icon.gif);
}

ephox-label Attribute

Description
This CSS attribute can be used to specify the label used for a custom tag. If using this attribute with either block or inline tags then it should be used instead of the ephox-start-label and ephox-end-label attributes. This attribute must be used when specifying an label to represent an empty tag.

Permitted Values
label
A label to be used with the start and end tags of a custom tag.

Example
The following example specifies the label Custom Tag for the start and end tag labels of the custom tag <MyTag>.

 
MyTag{
   display: block;
   ephox-label: Custom Tag;
}

See Also

• Using CSS in EditLive!