	Developers
	Developers Home
	EditLive! for Java
	EditLive! for Windows
		System Requirements
		Getting Started
		Integration Samples
		Articles
		API Reference
	EditLive! for XML
	Discussion Forums

EditLive! and Style Sheets

Ephox, July 2001

Summary

EditLive! fully supports the use of style sheets with web pages. Once a style sheet has been loaded into EditLive! the page will be displayed as it would be inside a browser window. It is also simple to limit users to using only specified style rules for formatting text within EditLive!.

This article includes all of the information you need to know to:

Load and save styles within EditLive!.
Applying styles within EditLive!.
Restricting users to specified CSS rules.

More Information

Introduction

This article assumes you are familiar with the concept of cascading style sheets (CSS) in HTML documents. If you would like to learn more about CSS before reading this document visit the W3C's Introduction to CSS.

Using styles, you can set page margins, indents, paragraph spacing, font type, font size, borders, backgrounds and colors.

Loading and Saving Styles

Defining the STYLE element

You can easily define CSS rules in a STYLE element in the HEAD area of a document when you set the SourceAll property or load a document from an FTP server using LoadFile. The cascading style sheet (CSS) rules are applied to the content when it is loaded into EditLive!. The CSS rules are also listed in the Style drop-down box on the toolbar so that your users can easily apply the style rules to their content.

var strDocument = '<HTML>';
strDocument += '<HEAD><STYLE>P{font-size:8pt}</STYLE></HEAD>';
strDocument += '<BODY><P>Test</P></BODY>';
strDocument += '</HTML>';
editLive1.setSourceAll(strDocument);

If you are using EditLive! in conjunction with a database you will need to load and save styles from a database field, particularly if your users are importing content from Microsoft Word. You can set and retrieve the contents of just the STYLE element (i.e. between <style> and </style>) using the StyleElementText property.

editLive1.setWebRoot('http://www.ephox.com/test/');
editLive1.setStyleElementText('P {font-size:8pt}');
editLive1.setSource('<P>Test</P>');

When you use SourceAll to retrieve the document or SaveFile to save the document back to the FTP server, the STYLE elements are preserved. Any new rules that have been imported as a result of the user pasting content from Microsoft Word are added to the STYLE element (for more information see Importing content from Microsoft Word).

For an example of how to use StyleElementText view the Sample Database Application for ASP.

Linking to an external style sheet

Using SourceAll you can include a LINK reference to an external style sheet in your document. Note that the URL specifying the location of the style sheet is relative to the directory specified in WebRoot.

var strDocument = '<HTML>';
strDocument += '<HEAD><LINK rel="stylesheet" href="yourstylesheet.css"></HEAD>';
strDocument += '<BODY><P>Test</P></BODY>';
strDocument += '</HTML>';
editLive1.setWebRoot('http://www.ephox.com/test/')
editLive1.setSourceAll(strDocument);

In order to use an external style sheet it also possible to explicitly load it into EditLive! using the LoadStyleSheet method.

editLive1.setWebRoot('http://www.ephox.com/test/');
editLive1.loadStyleSheet('yourstylesheet.css');
editLive1.setSource('<P>Test</P>');

Applying Styles

After styles have been loaded using the above methods, users can choose from a range of built-in styles (e.g. Address, Bulleted List, Definition, ... ) and any custom class selectors (e.g. Normal.msobodytext, .mystyle). These are available from the Style drop-down list on the EditLive! toolbar.

Custom class selectors applied to a segment of text (e.g. Normal.msobodytext) can be removed by selecting one of the default styles (e.g. Normal).

Restricting Users

Force users to format their document only using styles

By setting StylesOnlyMode to true you can force your users to use the styles available in the Style drop-down list to achieve their desired formatting. All other formatting options such as Bold, Underline and Italic are disabled.

Display only defined styles

By setting AllowStyleSheetFormattingOnly to true you remove all built-in styles from the Style drop-down list. Only CSS rules defined using the above methods will be shown. If you would like your users to have access to some of the built-in styles (e.g. Heading 1) you just need to define them (e.g. H1 {font-size:50pt} ) as CSS rules.