Differences between designMode and contentEditable

To make a web page editable, IE provides two methods. One of them is setting document.designMode = “on”, which can only be applied to the entire document. And the other method is setting contentEditable = “true”, which can be applied to any HTML elements. The good part of the first method is that the same syntax can also be used for Firefox, which is why I prefer using the method. According to the document located at http://msdn2.microsoft.com/en-us/library/ms537837(VS.85).aspx, setting document.designMode = “on” and document.body.contentEditable = “true” are supposed to have exactly the same effect.

 

And it did look like they do

 

But as I go on and do more things with the editor, I started to make some disturbing discoveries. The first weird thing I noticed was that if the document.domain property was set for the document, I don’t get to access the editing area as the browser would throw an “access denied” exception. I’m sure that this should not have anything to do with the cross-domain issues because

1. The same domain value was set for the outer document and the editing area (iframe).

2. Firefox does not complain.

3. It works fine if I used the second method and make use of the contentEditable property.

 

And the next thing I discovered is that those two methods react differently to the lines that the source code looks something like <p> </p>. The designMode method would take it as a blank line. But the contentEditable method would take it as a line with a “space”.

 

These behaviours are not documented anywhere and took me such a long time to pin point what is causing the differences. And I believe that there must be more “subtle” differences between the two, which would cause someone to spend a hell of a time. So, if any of you reading this, discover any other differences, it would be very appreciated if you would share your knowledge here. 😀

 

Should I go for designMode or contentEditable for my editor?

It has been such a confusing time for me. Then, I saw this article http://starkravingfinkle.org/blog/2007/07/firefox-3-contenteditable/, which says that Firefox will have support for contentEditable property for the next major release. And now, my guess is that the designMode would slowly fade away as contentEditable is “supposed” to do the same thing and some more. So, yes, my decision for now is the contentEditable for IE/Safari and designMode for Firefox until the support is added.