In order to perform the track changes functionality for EditLive!, Tiny has generated a simple serialization format for HTML documents to encapsulate change information. This serialization format is based on the same principals as the OpenOffice.org serialization.
Change information is stored within the HTML document by using <change> tags. The end of the <body> element of the HTML document contains a hidden <div> tag containing the logic for the change information. Change tags are mapped by their id attributes to corresponding tags with the same id attribute value within the hidden <div>. This allows EditLive! to easily merge the user's changes by nesting <change> tags while mapping the change details in the hidden <div>.
Example HTML Document
The following is an example HTML document containing change information created using EditLive!.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://testsuite/java" />
<meta http-equiv="Content-Type" content="text/html; charset=cp1252" />
<meta name="generator" content="EditLive! 6.0.0.1186" />
</head>
<body>
<p>
Line 1 - <strong>BOLD</strong> text<change id="352" type="start" />
</p>
<p>
new line of text added<change id="352" type="end" />
</p>
<p>
<change id="379" type="both" />
</p>
<p>
Line 3 - <span style=" text-decoration: underline;">UNDERLINED</span> text
</p>
<p>
Line 4 - Hyperlink <change id="381" type="start" /><a href="http://www.ephox.com/support">here</a><change id="381" type="end" />
</p>
<div style="display: none;"><trackchanges version="1.0"><insert id="352" xml:space="preserve" author="Ephox" time="2006-09-19T14:04:09+1000"/><remove id="379" xml:space="preserve" author="Ephox" time="2006-09-19T14:04:17+1000" type="range"><p>Line 2 - <em>ITALIC</em> text</p></remove><multiplepropertychange id="380" xml:space="preserve" author="Ephox" time="2006-09-19T14:04:25+1000"><setproperties id="381" xml:space="preserve" author="Ephox" time="2006-09-19T14:04:25+1000"><propertychange original="http://www.ephox.com" tag="a" new="http://www.ephox.com/support" name="href"/></setproperties></multiplepropertychange></trackchanges></div>
</body>
</html>
Using HTML Documents in EditLive! Featuring Change Information
Extracting HTML from EditLive! Featuring Change Information
Change information is encapsulated in the XHTML in a way that will not cause any difference in rendering when the XHTML is viewed through a web browser. This allows users to publish their content to the web with change information still intact, and later edit this content and still view all changes made. All change information is stored within the <BODY> element of the document. Hence, when using the getBody Method, all change information will still be extracted from the editor.
Inserting HTML Featuring Change Information into EditLive!
When HTML is loaded into EditLive! (using any of the methods listed in the Setting EditLive! Contents article), if change information is identified Track Changes will automatically be enabled and Track Changes rendering will be initiated.
Change Types
There are three different changes that can occur to the content in EditLive!:
- Changes that Add Content - These changes include actions such as typing new text or adding a new element (such as a table or a list).
- Changes that Remove Content - These changes include deleting text or removing elements.
- Changes that Adjust Properties - Property adjustment changes that refer to changing the attributes of a HTML tag (e.g. changing the src attribute for an <img> tag)
This article will show how each of these change types is stored in the XHTML document.
Changes that Add Content
Example
The user loads the following HTML fragment into EditLive!:
<p>
Line 1 - <strong>BOLD</strong> text
</p>
The user then places the cursor after the string text. The user hits enter and types new line of text added. The HTML document would now appear as follows:
<p>
Line 1 - <strong>BOLD</strong> text<change id="313" type="start" />
</p>
<p>
new line of text added<change id="313" type="end" />
</p>
<div style="display: none;"><trackchanges version="1.0"><insert id="313" xml:space="preserve" author="Ephox" time="2006-09-19T13:20:18+1000"/></trackchanges></div>
Changes that Remove Content
Example
The user loads the following HTML fragment into EditLive!:
<p>
Line 1 - <strong>BOLD</strong> text
</p>
The user then selects the line of text and presses the backspace key. The HTML document would now appear as follows:
<p>
<change id="336" type="both" />
</p>
<div style="display: none;"><trackchanges version="1.0"><remove id="336" xml:space="preserve" author="Ephox" time="2006-09-19T13:39:20+1000" type="range"><removedContent><p>Line 1 - <strong>BOLD</strong> text</p></removedContent></remove></trackchanges></div>
Example
The user loads the following HTML fragment into EditLive!:
<p>paragraph 1</p> <ul> <li>list item 1</li> <li>list item 2</li> </ul> <p>paragraph 2</p>
In the editor's design view, the user places the cursor in front of the text paragraph 2 and presses the delete key. The HTML document would now appear as follows:
<p>paragraph 1</p> <ul> <li>list item 1</li> <li>list item 2<change type="both" id="0" />paragraph 2</li> </ul> <div style="display: none;"><trackchanges version="1.0"><remove id="0" xml:space="preserve" author="Ephox" time="2006-10-26T09:42:59+1000" type="range"><removedContent><p> </p></removedContent><closeTags><ul><li/></ul></closeTags><openTags><p/></openTags></remove></trackchanges></div>
Changes that Adjust Properties
Example
The user loads the following HTML fragment into EditLive!:
<p>
Line 1 - Hyperlink <a href="http://www.ephox.com">here</a>
</p>
The user then selects the hyperlink and opens the Tiny hyperlink dialog. The user then changes the Address field to contain http://www.ephox.com/support. After clicking OK, the HTML document would now appear as follows:
<p>
Line 1 - Hyperlink <change id="349" type="start" /><a href="http://www.ephox.com/support">here</a><change id="349" type="end" />
</p>
<div style="display: none;"><trackchanges version="1.0"><multiplepropertychange id="348" xml:space="preserve" author="Ephox" time="2006-09-19T13:45:11+1000"><setproperties id="349" xml:space="preserve" author="Ephox" time="2006-09-19T13:45:11+1000"><propertychange original="http://www.ephox.com" tag="a" new="http://www.ephox.com/support" name="href"/></setproperties></multiplepropertychange></trackchanges></div>
Example
The user loads the following complete HTML Document into EditLive!:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<meta content="EditLive! for Java 6.0.0.1423" name="generator" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style type="text/css">
<!--
h5.warning {
font-weight: bold;
color: red;
}
-->
</style>
</head>
<body>
<h5>Heading 5 - Text</h5>
</body>
</html>
The user then switches to design view, selects the text Heading 5 - Text and changes the style to h5.warning. The HTML document would now appear as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<meta content="EditLive! 6.0.0.1423" name="generator" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
h5.warning {
font-weight: bold;
color: red;
}
-->
</style>
</head>
<body>
<h5 class="warning" changeid="1">Heading 5 - Text</h5>
<div style="display: none;"><trackchanges version="1.0"><setproperties id="1" xml:space="preserve" author="Ephox" time="2006-10-26T10:39:30+1000"><propertychange new="warning" name="class"/></setproperties></trackchanges></div>
</body>
</html>