HTML5 contentEditable с помощью jQuery

Question

У меня есть некоторые элементы, которые должны иметь текст внутри редактируемого, для этого я использую атрибут HTML 5 contentEditable.Я не могу использовать jQuery для этого, используя несколько селекторов.Я хочу, чтобы все теги внутри контейнера div были доступны для редактирования.Вот пример того, как это выглядело бы, если бы он работал с jQuery:

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

Я не знаю, как заставить его выбирать все теги, но вы поняли, в чем дело.

Таким образом, все span, div, таблицы, жирный шрифт и т. Д. Должны редактироваться индивидуально

Answer 1

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

* означает «все типы элементов» и аналогично a,div,span,ul,etc...

Как и большинство других функций jQuery, attr применяетта же операция для каждого элемента, захваченного селектором.

Answer 2

$("#container *").attr("contentEditable", true)

Просто предположение. Вдали от рабочей станции.

Answer 3

У меня сложилось впечатление, что вы неправильно понимаете проблему в двух местах:

1. jQuery создает объекты "запроса", которые обеспечивают сокращение для манипулирования наборами элементов DOM.Ваш пример кода устанавливает contentEditable для запроса, а не то, что ему соответствует.Вам нужно сокращение jQuery для «установить атрибут для всех соответствующих элементов», которое равно $('whatever').attr('contentEditable','true');

2. Я не уверен, что вы правильно понимаете contentEditable.Вы должны установить его на контейнер верхнего уровня для каждой редактируемой области, и его эффекты применяются ко всему внутри.По моему опыту, если установка contentEditable на #container или что-то вроде #container div.post действительно недостаточно хороша, то у вас есть большие проблемы.

Answer 4

По какой-то причине в IE10 только это работало:

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

Почему attr не работает, я не знаю.

Answer 5

Если я правильно помню, установка значения contentEditable для родителя также приведет к тому, что все его дочерние элементы станут редактируемыми.

Делаем так:

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

Должно работать.