Wolfgang.Schmidetzki.Net

Fotos und mehr ...

Editing Richtext with the browser

If you have to enable user to edit formatted text (Richtext or RTF) directly in a web page you can either use one of the available javascript utilities or write your own RTF-editor.

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 ...)

Existing solutions

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.

Another free RTF-Editor is fckeditor written by Frederico Caldeira Knabben (fredck@fckeditor.net). fckeditor is licensed as GNU Lesser General Public License.

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:

<html>
 <head></head>
 <body>
   Text to edit
   <script>document.designMode="on";</script>
 </body>
</html>

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:

document.getElementById("id-of-iframe-element").contentDocument.designMode="on";

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:

IE:
  document.getElementById("editor").innerHTML
Mozilla (when using an iframe);
  document.getElementById("id-of-iframe-element").contentDocument.body.innerHTML

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:

command
IE
Mozilla
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.

Part 2 of this article talks about general design of the javascript edotor class.

Kommentare:

comment von Wolfgang Schmidetzki 00:51 Uhr MEZ

Some people seens to think it's a good idea to type some destructive
HTML in the comment field. Therefore I disabled the HTML-View in the
RTF-Editor.

comment von Volker Weber 00:51 Uhr MEZ

http://tinymce.moxiecode.com/

comment von Jay 19:58 Uhr MEZ

This is just pretty html tagging not the RTF&nbsp;I'm looking for. Nice though&nbsp;

comment von VisionForce 20:48 Uhr MEZ

<P>I wish I could figure out how to select text in a &lt;textarea&gt; from JavaScript! It's killing me! If anyone can help, please email me:</P>
<P>webmaster at visionforceweb dot com</P>

comment von Joel 07:46 Uhr MEZ

<P>I'm actually working on&nbsp;a similar editor and with IE set in designmode, noticed that it always returns tags in <STRONG>uppercase</STRONG>.</P>
<P>Know of any way(s) to produce <EM>XHTML</EM> compliant code?</P>

Bitte geben Sie hier Ihren Kommentar ein:

Verwende Markdown Syntax

Twitter

Powered By

  • OpenWGA Blogs 2.3.2 Build 128
    Running on:
    OpenWGA Server 7.0.14 Maintenance Release (Build 641)
    www.openwga.com