When specifying CSS for use in an instance of EditLive!, you may not necessarily want every style to appear in the styles drop-down combo box. Using specific CSS attributes, you can hide or display specified CSS elements in the styles drop-down in EditLive!.
Showing or Hiding the Style
Using the stylesVisibility attribute of the <wysiwygEditor> configuration parameter you can limit the styles that are displayed such that
- only styles that have the CSS attribute ephox-visible set to "true" are shown. This is known as "whitelisting", or
- all styles are displayed except styles with the ephox-visible set to "false". This is known as "blacklisting"
the default behaviour of EditLive! is to use blacklisting.
Identify Specific Styles
To show/hide a style in the styles drop-down combo box in EditLive!, developers can use the ephox-visible CSS attribute.
If the attribute is not included, the decision on if it's is included or not is dependent on the stylesVisibility attribute of the <wysiwygEditor> configuration parameter
ephox-visible Attribute
Description
The ephox-visible attribute specifies whether the style this attribute belongs to will render in the Styles drop-down combo box in EditLive!.
Permitted Values
true
The style this attribute belongs to will appear in EditLive!'s style drop-down combo box.
false
The style this attribute belongs to will not appear in EditLive!'s style drop-down combo box.
Example
The following style sheet has three styles showing different values of the ephox-visible attribute.
.myCSSClass {
}
.navigation {
ephox-visible: false;
}
.content {
ephox-visible: true;
}
If the <wysiwygEditor> attribute stylesVisibility is not included, or set to "blacklist" the following styles will appear in in EditLive!'s style drop-down combo box.
- .myCSSClass
- .content
If the <wysiwygEditor> attribute stylesVisibility is set to "whitelist" the following styles will appear in in EditLive!'s style drop-down combo box.
- .content