Editing Richtext with the browser
I had some reasons for writing my own editor code and this article gives some background information about this project and may help others working on the same target.
This part 1 of the article talkes about the basics and how richtext editing in general works. Part 2 will talk about some general design desissions I made while implementing the editor.
Before I begin: You can test the editor in the comment section of this blog (if you are using IE or Mozilla). However some of the features are disabled in comments (normaly you would hide even more features to the public f. e. inserting grafics and I will do this for sure in the future ...)
The most popular RTF-Editor propably is HTMLArea written by interactivetools.com. HTMLArea 3.0 replaces <textarea>s in IE and Gecko browsers. HTMLArea is licenced based on the BSD open-source license and beta for a very long time now (a year or so). Development seems to have stopped.
In my case however I need a very deep integration into our Content Management Systeme WebGate Anywhere and I needed improvement of some functions not available in those OS-projects. F. e. I want a "floating" toolbar staying always visible on the top of the page because that makes editing of long texts (like this posting) eaysier. So I decided to write my own editor.
The way it works: the basics
IE (>5.5) and Mozilla both support editing directly in the browser. You simply have to switch this feature on.
IE allowes you to edit any DOM-Element in the DOM tree by setting the attribute "contentEditable" to "true". Here is a simple example:
<div id="editor">Text to edit</div>
<script>document.getElementById("editor").contentEditable = true;</script>
In Mozilla based browsers you can only edit the complete document. You do this by setting the attribute "designMode" to "on" (uppercase 'M') in the document object. Again here is a simple example:
Text to edit
In the real world you will normaly not edit the current document however. Instead you will have an embeded iframe element and edit the document of that iframe:
Im both examples you will get a cursor and you can write directly in the web page. That's easy.
The advantage of editing an element (IE) instead of the document of an iframe (Mozilla) is that the editor inherits all CSS formats from the existing document where in Mozilla the default font size, font color etc. is used (that was another reason why I don't use HTMLArea, because it uses an iframe also in case of IE).
How to format text
You can format selected text by using the predefined function document.execCommend() in both browsers. For example add the following code to the examples above:
<button onclick="document.execCommand('bold', false, null);">bold</button>
You are now able to select text, presss the button and the selection will be formated to bold.
execCommand() takes 3 arguments. The first one specifies the "command", the second defines if you want to show a UI (f. e. when inserting a link, IE is able to show an link dialog if you specify "true" as second parameter) and the last parameter carries data to the command (f. e. you may send a URL to the "insertlink"-command in the third parameter). In case of Mozilla, the second parameter must be false. You will get an error otherwise. In addition IE allowes you to obmit the second and third parameter - Mozilla does not.
The commands for the "same functions" are identical in IE and Mozilla however IE knows a lot more commands than Mozilla. A complete List of available commands can be found here for IE and here for Mozilla.
How to get the resulting HTML code
You can retrieve the HTML code simply by using the innerHTML property on the element that has been edited:
Mozilla (when using an iframe);
Diffenent HTML generated in IE and Mozilla
On of the difficults (where I don't have a solution for) is that IE and Mozilla creates completly different HTML code when executing a command. The Bold command in IE f. e. creates a <strong>-tag where Mozilla creates a <span style="font-weight: bold;">-tag. If you start editing with one of the browsers and continue editing with the other browser you will not be able to reformat the text. You are not able to change the style in IE and can't remove the strong-tag in Mozilla.
Here is a list of diffenrences I noticed:
|bold||<strong>||<span style="font-weight: bold;">|
|italic||<em>||<span style="font-style: italic;">|
|underline||<u>||<span style="text-decoration: underline;">|
|indent||<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">||<div style="margin-left: 40px;">|
|ForeColor||<FONT color=#996699>||<span style="color: rgb(102, 102, 0);">|
|JustifyLeft||<P align=right>||<div style="text-align: left;">|
|JustifyRight||<P align=right>||<div style="text-align: right;">|
|JustifyCenter||<P align=center>||<div style="text-align: center;">|
In adition IE creates a <p>-tag when enter is pressed while Mozilla creates a <br>.
So which browser creates the better HTML code? The <strong>, <em> and <u> tags in IE are better because thay can be "redefined" using CSS. In case of Mozilla "bold" realy means bold. On the other hand ... If the user wants "bold" he may don't expect a <strong>-tag being inserted in the code. I think both browser should have a command "strong" for this.