No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

What's wrong with contentEditable

Nick Santos (medium) on "Why contentEditable is terrible"

Piotrek Koszuliński (CKEditor) on "contentEditable — the good, the bad, and the ugly"

Piotrek Koszuliński (CKEditor) on "Fixing contentEditable"

List of contentEditable browser inconsistencies by Guardian

Problematic use cases in the wild

  • Facebook implements rich editing via textarea and an overlayed element on top to visualize mentions
  • Google plus has contenteditable="plaintext-only" which seems to be completely JS-driven plain element
  • Grammarly implements grammar-correcting-underlines via textarea + element on top (reasons: contenteditable is slow to render, no way to clean markup, hard to do proper selection/annotations)
  • Quip has a hybrid editor (each paragraph is a contenteditable line; same with
  • Trix editor ignores contentEditable and maintains its own internal model (to avoid dealing with x-browser inconsistencies and complexities); same with ProseMirror

Chrome ticket on improving painting performance of contentEdtiable


Original discussion from June 2014

To make this simpler for sites, frameworks, and browsers, it makes sense to enable a new, simpler version of contentEditable that provides basic functionality only. For the sake of discussion, call it contentEditable='minimal'

Julie Parent breaking down potential contentEditable=minimal functionality:

  1. Selections: Enable selections, perform cursor movement, scoping the boundaries on which the selection can operate.
  2. Input: Perform dom modifications, dispatch events, not limited to keyboard input, also includes IME, paste, drop, etc.
  3. Spell check: Enable spell check, modify the dom (or dispatch an event) when the user selects a replacement
  4. Formatting magic: bold when the user hits control + b, change directionality on Ctrl+LeftShift , etc.

Where do we draw the line with cE=minimal? Only 1 or 1+2? Should cE=minimal modify DOM? Opinions divided in two. Some say that DOM mutation is a can of worms that shouldn't be opened (instead allowing user to change it programmatically). Others say that cE=minimal will be useless without some sort of automatic text modification.

W3C ticket on contentEditable=plaintext

Piotr Koszuliński on current progress with contentEditable=minimal

Light at the end of a tunnel?

The Editing Task Force

What about this kind of tiered solution?

contentEditable value Fires events Draws cursor Mutates DOM Formatting
minimal yes no no no
minimal-with-cursor yes yes no no
minimal-with-mutation yes yes yes no
true yes yes yes yes