Ephox EditLive! provides support for the use of Cascading Style Sheets (CSS) to enforce formatting standards by easily separating content from formatting/layout.
In EditLive! there are a number of ways to apply the styles that you would like to use. This article is intended to outline the different options and explain how each works in the editor.
CSS in EditLive!
In EditLive! the default styles are either loaded via CSS or in the XML configuration file. Using these methods allows you to have complete control over what styles are loaded.
In the absence of any CSS the editor has "defaults". This is no different than a web browser and we try to match styles as best we can across the most common browsers.
Note: Embedded in EditLive’s distribuitables is a base CSS file which contains most of the default CSS.
EditLive! CSS support complies with the W3C CSS precedence rules. Thus inline styles take precedence over an embedded style sheet. Furthermore the styles listed in an embedded style sheet take precedence over those from an external style sheet. Finally, when multiple external style sheets are used style sheets listed last will have precedence if there is any conflict between style sheets.
This means that we use nothing other than CSS loaded via:
- CSS in the HTML
- CSS in configuration
- Default CSS
This means that you have control over all the styling that EditLive! uses in Design mode.
1. CSS in the HTML
In-line styles are written straight into the HTML tags using the style attribute.
<p style="color: red">text</p>
This will make that specific paragraph red. But, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This will make all of the paragraphs in the page red and all of the links blue.
Similarly to the in-line styles, you should ideally keep the HTML and the CSS files separate.
2. CSS in configuration
To specify an external CSS file for use with EditLive!, you'll need to make changes to your EditLive! Configuration File.
Open the sampleeljconfig.xml file packaged with EditLive! using a text editor and locate the following line of code:
<!-- <link rel="stylesheet" href="http://www.yourserver.com/style.css" type="text/css"/> -->
Remove the <!-- and --> characters
<link rel="stylesheet" href="http://www.yourserver.com/style.css" type="text/css"/>
Change the href attribute to reference the css file that you would like to use. The URL for the location of the main.css can either be absolute or relative to the webpage where EditLive! is instantiated from.
<link rel="stylesheet" href="main.css" type="text/css"/>
Save the configuration file.
EditLive! can apply styles both as inline styles and block styles. Block styles are applied to an entire XHTML element such as a <P> tag whereas inline styles are applied to a section of text within a XHTML element.
Specifying Block Styles
The way in which styles are specified within a style sheet affects the way they can be applied within EditLive!. Style classes which are directly associated with a block tag can only be applied to a block tag. These styles are designated by a ¶ symbol on the styles drop down in EditLive!. A block style which defines that paragraph text should be blue can be defined as follows:
Specifying Inline Styles
Inline styles in EditLive! are applied using the <SPAN> XHTML element. Thus, to define a style which can only be used inline it should be defined as a class to be used with the <SPAN> tag. These styles are designated by an a mark on the styles drop down in EditLive!. An inline style which would specify text that is to have a red color would be as follows:
Specifying a Block and Inline Style
Finally, it is possible to define a style class which may be used as both an inline and block style. These styles appear twice on the EditLive! styles drop down, once marked with the ¶ symbol and again with an a mark. A style class which could be applied on both block and inline tags to change the text color to green is as follows:
Note: With the exception of styles defined inline, style information specified through the use a configuration file takes precedence over style information specified in any other way.
3. The ‘default’ CSS
There is a "default" stylesheet that EditLive! uses underneath the configured CSS to ensure our default rendering matches that of the most common browsers. If you really need to, then can get access to the underlying StyleSheet instance that we use by casting the Document to a HTMLDocument. In EditLive! version 7.5 this would be:
HTMLDocument doc = (HTMLDocument)eljBean.getEditorPane().getDocument();
StyleSheet styles = doc.getStyleSheet();
Note: EditLive! recognizes style information and populates the style drop-down list box accordingly.
EditLive! provides a number of ways to ensure that your CSS is applied. Using one or a combination of the options above you can make it simple for your editors to apply the styles you want.
Please direct any support requests or general enquiries about any code, integrations or plug-ins to Ephox EditLive! Forum. This code is released as-is with no support and no warranty and is installed at your own risk. We recommend thorough testing of any LiveWorks! project before deploying to any production system.