Stack Overflow
Stack Overflow

Questions tagged [contenteditable]

contentEditable is an HTML attribute (invented by Microsoft and standardized in HTML5) that is used for client-side in-browser "rich text" editing.

There are really two attributes involved, designMode and contentEditable. The designMode attribute governs the entire document (i.e. it makes the entire document editable, like a dedicated HTML editor). The contentEditable attribute governs just the element on which it appears, and that element's children -- like a rich text editor control within a page.

Resources

2552 questions
71
votes
8 answers

Dealing with line Breaks on contentEditable DIV

I have a problem with contenteditable line breaks on SAFARI/CHROME. When I press "return" on a contentEditable
, instead of creating a
(like Firefox), they create a new
:
Something
Something
That looks like (on…
Santiago
  • 2,405
  • 6
  • 31
  • 43
70
votes
12 answers

Prevent line/paragraph breaks in contentEditable

When using contentEditable in Firefox, is there a way to prevent the user from inserting paragraph or line breaks by pressing enter or shift+enter?
Daniel Cassidy
  • 24,676
  • 5
  • 41
  • 54
70
votes
8 answers

How to use [(ngModel)] on div's contenteditable in angular2?

I am trying to use ngModel to two way bind div's contenteditable input content as follows:
but it is…
Kim Wong
  • 2,027
  • 4
  • 17
  • 22
68
votes
11 answers

Placeholder in contenteditable - focus event issue

I have been trying to ask this before, without any luck of explaining/proving a working example where the bug happens. So here is another try: I’m trying to replicate a placeholder effect on a contenteditable DIV. The core concept is simple:
David Hellsing
  • 106,495
  • 44
  • 176
  • 212
67
votes
4 answers

What are the cons of using a contentEditable div rather than a textarea?

Would I be shooting myself in the foot by using a div with attribute contentEditable="true" as a text field rather than a textarea?
Babiker
  • 18,300
  • 28
  • 78
  • 125
65
votes
3 answers

replace selected text in contenteditable div

I have been looking high and low for an answer but failed. Is there a cross-browser solution to replace selected text in contenteditable div? I simply want users to highlight some text and replace the highlighted text with xxxxx.
Judy
  • 765
  • 1
  • 8
  • 9
61
votes
3 answers

Get caret (cursor) position in contentEditable area containing HTML content

I have contentEditable element (can be p, div, ...) and I would like to get caret (cursor) position in it. I can normally achieve it with this piece of code: var position = window.getSelection().getRangeAt(0).startOffset; This works fine while the…
Frodik
  • 14,986
  • 23
  • 90
  • 141
60
votes
4 answers

HTML - Newline char in DIV content editable?

I am storing content in the database, for example: Hello This is Text and when I pass that to a textarea, it stays with the new line breaks. But if I pass that text to a div with content editable, it would stay like this: Hello This is Text How…
Afonso Luis
  • 613
  • 1
  • 6
  • 5
60
votes
4 answers

How to make an HTML

Do you know how to make a
editable with JavaScript? I'm looking for cross-browser solution. Something similar to a rich text area, but that uses an editable