21

I have some elements that need to have the text inside editable, for this I am using the HTML 5 attribute contentEditable. I can't seem to do use jQuery for this using multiple selectors. What I want to do is have every tag inside a container div be editable. Here's an example of what it would look like if it worked with jQuery:

$("#container <all tags here>").contentEditable = "true";

I dont know how to make it select all tags but you get the point.

So all span, div, tables, bold, etc should be editable individually

David
  • 2,365
  • 8
  • 34
  • 59

5 Answers5

44
$('#container *').attr('contenteditable','true');

* means "all element types", and is analogous to a,div,span,ul,etc...

Like most other jQuery functions, attr applies the same operation to every element captured by the selector.

Rex M
  • 142,167
  • 33
  • 283
  • 313
  • 7
    @DaveJarvis: The attribute is `contenteditable`, not `contentEditable`. If this doesn't work in some versions of IE, it's because older IE's `setAttribute()` implementation is broken, so I would advise using the `contentEditable` property instead. This is generally a good idea for almost all attributes. So, I'd recommend `$('#container *').prop('contentEditable', 'true')` – Tim Down Jun 02 '13 at 11:12
  • contenteditable automatically applies to all the elements below it, so all you really need is $('#container').attr('contenteditable','true'); – xtempore Jan 25 '17 at 02:36
5
$("#container *").attr("contentEditable", true)

Just a guess. Away from workstation.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
mkoistinen
  • 7,724
  • 3
  • 41
  • 56
1

I get the impression you're misunderstanding the problem in two places:

  1. jQuery creates "query" objects which provide a shorthand for manipulating sets of DOM elements. Your example code sets contentEditable on the query, not what it matches. You want jQuery's shorthand for "set an attribute on all matching elements", which is $('whatever').attr('contentEditable','true');

  2. I'm not sure you understand contentEditable properly. You're supposed to set it on the top-level container for each editable region and its effects apply to everything within. In my experience, if setting contentEditable on#container or something like #container div.post really isn't good enough, then you've got bigger problems.

ssokolow
  • 14,938
  • 7
  • 52
  • 57
0

For some reason in IE10 only this seemed to work:

$('#container').get(0).contentEditable = "true";

Why attr didn't work I do not know.

Matthew Lock
  • 13,144
  • 12
  • 92
  • 130
0

If I can remember correctly, setting the contentEditable value on the parent would also cause all its children to become editable.

So doing this: 

$('#container').attr("contentEditable", "true");

Should work.

Dave Jarvis
  • 30,436
  • 41
  • 178
  • 315
Yi Jiang
  • 49,435
  • 16
  • 136
  • 136