Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Risk of using contentEditable in IE

Tags:

We have to add a basic HTML editor to our product. As we only support IE at present (most customers are still on IE 6), I have been told to use the Internet Explorer built-in XHTML editing capabilities – e.g. <div contentEditable="true"> as explained at "Editing a Web Page" .

Apart from not working in other browsers. (The management does not consider it being a problem. Our customers will put up with our software only working with IE. We have never lost any money by our software only working in IE; most customers will only let their staff use IE6 at present anyway)

What other problem are we likely to get with contentEditable?


Update

The HTML editor I wrote with “contentEditable” proved to very hard to get reliable, with many problems. If I had to do this again, I would push very hard to one of the many open source solutions (e.g. TinyMCE) or buy in a supported HTML editor.

No doubt that a very skilled jscript programmer can get “contentEditable” to work well given enough time. It just that all the examples on the web looks so simple, until you test common operations like doing a cut/paste from word and trying to edit the resulting HTML. (just the sort of things a customer will do)

(Just search for “contentEditable” on stackoverflow to get some ideal of the problems other people have had)

like image 447
Ian Ringrose Avatar asked Jan 29 '09 14:01

Ian Ringrose


People also ask

What is Contenteditable used for?

The contenteditable attribute specifies whether the content of an element is editable or not.

What is Contenteditable true?

The contenteditable is used to specify whether the element's content is editable by the user or not. Syntax: <element contenteditable="true|false"> This attribute has two values. true: If the value of the contenteditable attribute is set to true then the element is editable.

How do I make my website Contenteditable?

Answer: Use the HTML5 contenteditable Attribute You can set the HTML5 contenteditable attribute with the value true (i.e. contentEditable="true" ) to make an element editable in HTML, such as <div> or <p> element.


2 Answers

The contentEditable property works in Safari, Firefox 3, and Opera 9.

Since manipulation will undoubtably be through selections, your biggest problem will be getting the selection/ranges working across browsers (see here).

There are also numerous little bugs across browsers which may or may not bite you. These include incompatible case-sensitivity, incompatible methods of turning it off again (removeAttribute vs. setting to false).

Despite these flaws, I find it works rather well.

like image 53
Borgar Avatar answered Oct 25 '22 11:10

Borgar


How about using some open-source solution that works in all major browsers?

TinyMCE

There are other projects as well, but that's what I'd use.

like image 35
Ionuț G. Stan Avatar answered Oct 25 '22 12:10

Ionuț G. Stan