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
46
votes
5 answers

What is the default style of the blue focus outline in Chrome?

I have a webapp that uses contenteditable div's. I like how they appear in Chrome: when I focus, Chrome displays a nice blue glow around the div. However in Firefox I get an ugly dashed outline. What I observed so far is that Chrome stops…
Barney Szabolcs
  • 11,846
  • 12
  • 66
  • 91
44
votes
3 answers

selectionStart and selectionEnd in contenteditable element

I have been struggling the selectionStart and selectionEnd attributes of textarea to make them work with contenteditable div element. I have checked a lot of related articles on google and on SO but to no avail. I have something similar to the…
Semytech
  • 623
  • 1
  • 10
  • 17
43
votes
5 answers

AngularJS and contentEditable two way binding doesn't work as expected

Why in the following example the initial rendered value is {{ person.name }} rather than David? How would you fix this? Live example here HTML:
{{ person.name…
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746
42
votes
5 answers

How to select all text in contenteditable div?

Before this is flagged as a duplicate, I want you to realize that no one has actually provided a good answer for this specific question. In select all text in contenteditable div when it focus/click, the accepted answer and Tim Down's answer are…
Lucas
  • 16,930
  • 31
  • 110
  • 182
41
votes
9 answers

Remove formatting from a contentEditable div

I have a contentEditable Div and I want remove any formatting especially for copy and paste text.
Garth Humphreys
  • 793
  • 2
  • 9
  • 16
39
votes
6 answers

HTML contenteditable with non-editable islands

I have sort of browser based WYSIWYG editor where users can edit documents-templates. Document-template is an ordinary html with some special "merge code placeholders". Such template gets "instantiated" by replacing these placeholders by data coming…
c-smile
  • 26,734
  • 7
  • 59
  • 86
38
votes
7 answers

Vue 2 contentEditable with v-model

I'm trying to make a text editor similar to Medium. I'm using a content editable paragraph tag and store each item in an array and render each with v-for. However, I'm having problems with binding the text with the array using v-model. Seems like…
Soubriquet
  • 3,100
  • 10
  • 37
  • 52
38
votes
2 answers

Contenteditable allowing only plain text

I'm trying to make a contenteditable that only accepts plain text. What I want is to listen to paste event and then remove all html and paste it on the contenteditable only as plain text. In order to do that I've already tried two different…
Marina
  • 433
  • 1
  • 4
  • 10
38
votes
1 answer

Get element node at caret position (in contentEditable)

Let's say I have some HTML code like this:

Some heading text here

Some text here

Now the caret (the blinking cursor) is blinking inside the

element, let's say in the word "|heading".…

Lucas
  • 6,328
  • 8
  • 37
  • 49
37
votes
2 answers

What contenteditable editors are there?

This question should serve as a listing of all the different content-editable solutions. Post new ones in the answers below.
balupton
  • 47,113
  • 32
  • 131
  • 182
36
votes
6 answers

jquery Setting cursor position in contenteditable div

The old version of the question is below, after researching more, I decided to rephrase the question. The problem as before is, I need to focus a contenteditable div without highlighting the text, doing straight up focus highlights the text in…
Mark
  • 32,293
  • 33
  • 107
  • 137
35
votes
5 answers

How to change behavior of contenteditable blocks after on enter pressed in various browsers

When pressing enter in
in firefox
is produced - that's ok. But in Chrome or IE a new
or

is created. What should I do to make Chrome and IE behave like Firefox .

liysd
  • 4,413
  • 13
  • 35
  • 38
34
votes
1 answer

Detect a paste event in a contenteditable

given a content editable div. How can I detect a paste event, prevent the paste from being inserted so can I can intercept and sanitize the paste to include text only? I also don't want to lose focus after the paste + sanitize is complete.
Rachela Meadows
  • 815
  • 2
  • 12
  • 20
34
votes
3 answers

contenteditable=false inside contenteditable=true block is still editable in IE8

I have the following HTML intending to make sure that the inner span isn't editable. This works in other browsers but not IE8.
Luke, I am your father. I'm your son?! Ewww! Don't…
Gezim
  • 7,112
  • 10
  • 62
  • 98
33
votes
2 answers

Position of cursor in WKWebView with an editable paragraph in iOS

Is there anyway to get the position of the cursor in a WKWebView in iOS that contains an editable paragraph (a paragraph with attributed contentEditable set to true)? EDIT: To add additional information, the editable div can contain other subnodes
papafe
  • 2,959
  • 4
  • 41
  • 72
1 2
3
…
99 100