Menu
It seems both allow you to edit the document, so what's the difference?
533
The contenteditable attribute specifies whether the content of an element is editable or not. Note: When the contenteditable attribute is not set on an element, the element will inherit it from its parent.
The Design Mode is a browser specific property that allows us to directly edit the document ( website's text contents ), by default this property is set to the off state. To enable this mode open the developer console for your browser, and then type document. designMode="on" .
You can add the contenteditable="true" HTML attribute to the element (a <div> for example) that you want to be editable. If you're anticipating a user to only update a word or two within a paragraph, then you could make a <p> itself editable.
In this case, they're equivalent. contentEditable makes the element it's applied to and all descendant nodes editable. designMode makes the entire document editable.
There's a great summary of the history of both properties available on the WHATWG blog — The Road to HTML 5: contentEditable. It's worth a read, if you're interested.
93
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
