Ответ 1
Пусть работает через него.
Вы не можете сделать div редактируемым. Нет такой вещи, как редактируемый div, по крайней мере пока. Поэтому проблема заключается в том, чтобы выяснить, что использовать для редактирования. Текстовое поле прекрасно работает. Поэтому идея состоит в том, чтобы каким-то образом получить текстовое поле, в котором сидит div.
Вопрос в том, как и откуда мы получаем текстовое поле. Существуют разные способы, но один из них - динамически создавать текстовое поле "на лету":
var editableText = $("<textarea />");
и замените его на div:
$("#myDiv").replaceWith(editableText);
Текстовое поле теперь на месте. Но он пуст, и мы только что заменили div и потеряли все. Поэтому нам нужно как-то сохранить текст div. Один из способов - скопировать текст /html внутри div перед его заменой:
var divHtml = $("#myDiv").html(); // or text(), whatever suits.
Как только у нас есть html из div, мы можем заполнить текстовое поле и безопасно заменить div текстовым полем. И установите фокус внутри текстового поля, так как пользователь может захотеть начать редактирование. Объединив всю работу до этого момента, получим:
// save the html within the div
var divHtml = $("#myDiv").html();
// create a dynamic textarea
var editableText = $("<textarea />");
// fill the textarea with the div text
editableText.val(divHtml);
// replace the div with the textarea
$("#myDiv").replaceWith(editableText);
// editableText.focus();
Он функционирует, но ничего не происходит, когда пользователь нажимает на div, потому что мы не настраивали какие-либо события. Позвольте подключить события. Когда пользователь нажимает на любой div $("div").click(..), мы создаем обработчик кликов и делаем все вышеперечисленное.
$("div").click(function() {
var divHtml = $(this).html(); // notice "this" instead of a specific #myDiv
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
});
Это хорошо, но нам нужен способ вернуть наш div, когда пользователь щелкнет или покинет текстовое поле. Для элементов формы есть событие blur, которое запускается, когда пользователь покидает элемент управления. Это может быть использовано для обнаружения, когда пользователь покидает текстовое поле и заменяет div. На этот раз мы делаем точный оборот. Сохраните значение textarea, создайте динамический div, установите его html и замените текстовое поле.
$(editableText).blur(function() {
// Preserve the value of textarea
var html = $(this).val();
// create a dynamic div
var viewableText = $("<div>");
// set it html
viewableText.html(html);
// replace out the textarea
$(this).replaceWith(viewableText);
});
Все отлично, за исключением того, что этот новый div больше не будет преобразовываться в текстовую область при щелчке. Это новый созданный div, и нам придется снова настроить событие click. У нас уже есть весь код, но лучше, чем повторять его дважды, лучше сделать из него функцию.
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
Поскольку вся операция двусторонняя обратимая, нам нужно будет сделать то же самое для текстового поля. Позвольте преобразовать это в функцию тоже.
function editableTextBlurred() {
var html = $(this).val();
var viewableText = $("<div>");
viewableText.html(html);
$(this).replaceWith(viewableText);
// setup the click event for this new div
$(viewableText).click(divClicked);
}
Проводя все вместе, у нас есть 2 функции, divClicked, editableTextBlurred и строка ниже запускает все:
$("div").click(divClicked);
Оформить этот код на http://jsfiddle.net/GeJkU/. Это не лучший способ записи редактируемых разделов любыми способами, а всего лишь один способ начать и подойти к решению шаг за шагом. Честно говоря, я узнал так же, как и вы, написав эту длинную пьесу. Отправляемся, адио!