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)
The contenteditable attribute specifies whether the content of an element is editable or not.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With