Introduction

This update fixes a few minor issues in the old Rich Text Editor as well as adds a few much needed features.

XHTML

In January 2000, the W3C released the specification for the next version of HTML. Now almost two years later it is time to add the support for XHTML to the Rich Text Editor. The old version could read XHTML but there was no easy way to get the XHTML version of the document being edited. This version adds a method called getXHTML that returns a well formed XML document. Notice that it does not guarantee a valid XHTML document.

The method getXHTML works in IE5.0 and later. In IE4 you will have to continue to use getHTML(). To test if the client supports this feature, an expando property called supportsXHTML has been added to make it more convenient.

var edit = document.all.edit;
if (edit.supportsXHTML)
	alert(edit.getXHTML());
else
	alert(edit.getHTML());

To use getXHTML() you also need to include a second js file called stringbuilder.js that provides a class that makes concatinating strings faster. This means that the inclusion of the js files should look something like this:

<script type="text/javascript" src="js/stringbuilder.js"></script>
<script type="text/javascript" src="js/getxhtml.js"></script>
<script type="text/javascript" src="js/richedit.js"></script>


Init Event

Once an editor iframe has been inited (or reinited due to overhauling changes) a pseudo event is beeing called called oneditinit. This event is very useful if you want to hook up events to the document inside the editor.

<iframe id="edit" class="richEdit" oneditinit="editInited(this)"></iframe>

<script type="text/javascript">

function editInited(edit) {
   edit.frameWindow.document.body.style.color = "red";
}

</script>

New Paragraph or new line?

One feature that a lot of people are asking for is to make the enter key create a new line and not a new paragraph when pressed. This has been in the Rich Edit Component all the time but I added an expando property that can be set before the editor has been initialized that changes the behavior. If you add an attribute called usebr (and set it to true) to the iframe then when the user presses the enter key a new line will be inserted.

<iframe id="edit" class="richEdit" usebr="true"></iframe>

Unselectable

A common problem (that was introduced in IE5.5) is that the selection is lost when the user clicks outside the iframe. This is very anoying if you create a toolbar with bold, italic and other formatting buttons because when you click the buttons the selection is lost and the formatting is not applied. There is however a solution that fixes this. The secret is an IE55 proprietary property called unselectable. This should be added to any element outside the editor that you want to be part of the UI for the editor.

A good solution is to set the unselectable property to "on" on all elements in your page. This can either be done when the page is loaded or after the UI has been defined. A good place to add the following script block is just before you close the body tag.

<script type="text/javascript">
//<![CDATA[

var all = document.all;
var l = all.length;
for (var i = 0; i < l; i++) {
	if (all[i].tagName != "INPUT" && all[i].tagName != "TEXTAREA")
		all[i].unselectable = "on";
}

//]]>
</script>

Rich Edit Component
XHTML and more...
Demo

Author: Erik Arvidsson