Basic usage
The contenteditable attribute can be set to "true" or "false" to control whether an element and its children are editable.
<div contenteditable="true">
This text can be edited by the user.
</div>Key characteristics
- Rich text editing: Unlike
<input>or<textarea>, contenteditable supports formatted text, images, and complex HTML structures. - Event-driven: Content changes trigger events like
input,beforeinput, and composition events. - Selection API: Works with the Selection and Range APIs for programmatic text manipulation.
- Browser differences: Behavior varies significantly across browsers, operating systems, and input methods (IME).
Common use cases
- Rich text editors (WYSIWYG)
- Collaborative editing interfaces
- Inline editing in applications
- Custom form inputs with formatting
- Code editors with syntax highlighting
Important considerations
⚠️ Browser compatibility
contenteditable behavior differs across browsers, especially for IME composition, paste operations, and formatting. Always test on your target platforms.
⚠️ Security
User-editable content can include arbitrary HTML. Always sanitize contenteditable output before storing or displaying it elsewhere.
⚠️ execCommand deprecation
The document.execCommand() API is deprecated. Use the Selection API and DOM manipulation for formatting operations.