This update fixes a few minor issues in the old Rich Text Editor as well as adds a few much needed features.
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>
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>
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>
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>