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
1
vote
1 answer

Prevent contenteditable from styling text at cursor

How to prevent content editable from styling text at cursor position. By default it get style from closest node. But how to override this behavior?
Sometext bold|
Example on JSFIddle If you set caret (vertical bar…
Paul Rumkin
  • 6,737
  • 2
  • 25
  • 35
1
vote
1 answer

Medium.js in React.js component using invokeElement

I am making a simple MediumEditor component in React.js. I am basing the component on the invoke demo from the Medium.js page. My problem is that my call to invokeElement is effecting the entire content of my editable element not the selection…
Jon Rose
  • 1,457
  • 1
  • 15
  • 25
1
vote
1 answer

ExecCommand 'removeformat' for Firefox does not remove text-align

I have a div in the editor of FF :
asdasd
and
asdasd
When I select either of these and fire this command using JS : document.execCommand('removeformat',false,null); These…
Bhumi Singhal
  • 8,063
  • 10
  • 50
  • 76
1
vote
1 answer

Redactor - getting Failed to execute 'insertBefore' on 'Node' error with Meteor

I am trying to use Redactor with Meteor 1.0. I have tried to combine with this approach, as when I just included it straight I got the doubled up text: https://github.com/Swavek/contenteditable Error details: Exception from Tracker recompute…
aginsburg
  • 1,223
  • 1
  • 12
  • 22
1
vote
0 answers

How to make svg text editable when an svg node?

The following code gives a nice editable svg text box (in Chrome at least): d3.select("body").append("text").text("Test").attr("contentEditable","true"); However, the following code does not…
Eric
  • 31
  • 7
1
vote
1 answer

Caret styling in contenteditable div without text

How do you style the caret for a contenteditable div when there is no text in the div. Before text is entered: After text is entered: Notice how the caret on the before shot is up against the top of div, not vertically-centered like it is once…
Ryan Grush
  • 2,076
  • 3
  • 37
  • 64
1
vote
1 answer

How to fix firefox contenteditable wordwrap?

In firefox only this problem occurs. If you do any sort of update to the range in the keyup event, it won't allow you to move the caret from the beginning of the line to the end of the previous using the left arrow key. See: jsfiddle
poby
  • 1,572
  • 15
  • 39
1
vote
1 answer

get the deleted element from backspace event

I am using jquery on a contenteditable div, I have an element in this div which has a certain class, I want to check if the user is about to delete that element from the div, and then delete an element with a matching class. it will be like…
engma
  • 1,849
  • 2
  • 26
  • 55
1
vote
4 answers

Check whether an HTML element is editable or not using JS

Using JS, how can we find whether we can type into a html element or not. I am trying by comparing ".tagName" to "INPUT" or "TEXTAREA" but it fails to differentiate between a regular input text/email element and a radio-button or a submit-button. I…
Mohan
  • 141
  • 3
  • 13
1
vote
1 answer

Click event not always triggering

I'm using the bootstrap editor jquery plugin. I'm trying to set an event listener to the add hyperlink button, but it only gets triggered when the text input next to it is empty, otherwise it does not fire. Here's my jsfiddle. My…
Cornwell
  • 3,304
  • 7
  • 51
  • 84
1
vote
0 answers

CSS hover based on caret position (contenteditable div)?

I have something like this:

Some text

Some other text

Right now I can do .content p:hover (e.g. color: red) to manipulate the CSS. But that only works with the cursor. How can I…
alexchenco
  • 53,565
  • 76
  • 241
  • 413
1
vote
0 answers

floated div aligned with contenteditable caret position

I have this markup: HTML

CSS .figure { width: 540px; height: 540px; overflow: hidden; float: left; } .figure…
steo
  • 4,586
  • 2
  • 33
  • 64
1
vote
1 answer

Expand document.getSelection() to entire paragraph

With IE, this js code only works when the selection has a non-zero length: document.execCommand("FormatBlock",false,tag); Getting the containing node is trivial: var node = document.getSelection().anchorNode; but I don't really understand how to…
Peter Wone
  • 17,965
  • 12
  • 82
  • 134
1
vote
1 answer

insertHTML in the caret position without creating object

I have contenteditable div, and span with text inside.
Some text..
I need insert in place of caret closing and opening span tags. Like:
Some text..…
user4177355
1
vote
1 answer

how to do AngularJS 2-way binding of multiple objects in contenteditable including surrounding text

I want to have a collection like: var array = [{innerText: "I was with ", index:0},{obj: "Mary", id: 1, index:1}, {innerText: " and ", index:2},{obj: "John", id: 2, index:3}]; and a content editable div that will have all those up there but bound…
Michail Michailidis
  • 11,792
  • 6
  • 63
  • 106
1 2 3
…
99 100