There are several questions about asking how to make a div editable. However one could just use a textarea or input field and make those disabled or readonly. I would guess this would yield better semantics. Even the example given at MDN looks like a plain old input field to me.
So why would I use an editable div? What are its advantages over textareas and input fields?
I just had a look at an example I found in the tag wiki contenteditable.
Is the advantage, that I can use markup inside an editable div, but not inside a textarea or an input field? Wouldn't it then be more semantically correct to allow children to a textarea. Or introduce a whole new element like they did a lot with HTML5. Something like richtextarea
?
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 global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.
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.
To edit the content in HTML, we will use contenteditable attribute. The contenteditable is used to specify whether the element's content is editable by the user or not. This attribute has two values. true: If the value of the contenteditable attribute is set to true then the element is editable.
Your theorical "richtextarea" doesn't exist, so when people want to allow the users to write content including formatting, tables, images, etc... they must use what is available and that's an element with contentEditable.
Of course, if you look at a plain "contentEditable" element it will be boring, so you must look at a full featured editor like CKEditor or TinyMCE that provides a full interface built upon this feature.
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