Editable Elements

We can make the content of an element editable by setting the global contenteditable property value to either true or plaintext-only. Setting the value to plaintext-only strips any text of its styling, which can be verified by pasting the bold test from the first element into the two editable elements below it.

EditableElements.html

<!doctype html>
<html>
	<head>
		<title>XoaX.net's HTML</title>
		<script></script>
	</head>
	<body>
		<p>Copy and paste this <b>bold</b> text to see the difference.</p>
		<p style="width:400px;background-color: #C8EAB7;" contenteditable="true">You can edit this</p>
		<p style="width:400px;background-color: #C8B7EA;" contenteditable="plaintext-only">You can edit this</p>
		<p style="width:400px;background-color: #EAC8B7;">You can not edit this</p>
	</body>
</html>

Core HTML

Editable Elements

EditableElements.html

Output