Documentation
Learn about the contenteditable attribute, its behavior, events, and browser compatibility.
What is contenteditable?
Introduction to the contenteditable attribute, its purpose, and basic usage.
Events
Understanding input, beforeinput, composition, and other events in contenteditable.
IME & Composition
How Input Method Editors work with contenteditable and composition events.
Selection API
Working with text selection, ranges, and the Selection API in contenteditable.
execCommand alternatives
Modern alternatives to the deprecated execCommand API for formatting and editing.
Range API
Comprehensive guide to the Range API for manipulating document content in contenteditable elements.
Clipboard API
Using the Clipboard API and paste events to handle copy, cut, and paste operations in contenteditable elements.
Mobile Selection Toolbar
Understanding mobile browser selection toolbars, their differences across platforms, and how to implement custom toolbars.
Practical Patterns
Common patterns and code examples for implementing rich text editing features in contenteditable elements.
Common Pitfalls & Debugging
Common mistakes, pitfalls, and debugging strategies when working with contenteditable.
Performance
Performance considerations and optimization strategies for contenteditable elements.
Accessibility
Accessibility considerations and best practices for contenteditable elements, including screen reader support and keyboard navigation.
Keyboard Navigation
Comprehensive guide to keyboard navigation in contenteditable elements, including arrow keys, modifier keys, special keys, and browser differences.
contenteditable="false"
Understanding contenteditable="false" behavior, browser differences, and common issues when using nested contenteditable elements.
HTML Attributes
Understanding which HTML attributes work with contenteditable elements, browser differences, and workarounds for unsupported attributes.
Shadow DOM & Web Components
Understanding contenteditable behavior inside Shadow DOM and Web Components, including event bubbling, selection, focus management, and browser differences.
Drag & Drop
Comprehensive guide to drag-and-drop operations in contenteditable elements, including event handling, file drops, browser differences, and mobile considerations.
Focus & Blur Events
Understanding focus and blur events in contenteditable elements, including autofocus limitations, focus management, nested element interactions, and browser differences.
iframe Integration
Understanding contenteditable behavior inside iframes, including event handling, selection management, focus control, cross-origin limitations, and browser differences.
CSS & Styling
Understanding CSS properties that affect contenteditable elements, including caret styling, selection styling, focus styles, and browser differences.
Browser Detection
How to detect browsers and handle userAgent variations, especially on iOS where Chrome and Safari share the same engine.
Browser compatibility
Overview of contenteditable support and behavior differences across browsers.
Input Types
Comprehensive guide to inputType values in beforeinput and input events, including browser differences and edge cases.