JQuery редактировать комментарии

Question

Можете ли вы объяснить методы создания системы редактирования jquery, в которой я щелкаю по клику, а затем в нем отображается текстовая область и область редактирования.

Как лучше всего это сделать?

Прямо сейчас у меня есть это:

<div id="frame">
<div id="data">bla bla bla</div>

<a class='edit' href=''>edit</a>
</div>

<script>
$(function() {
    $('#frame a').click(function()
    {
        var data = $('#data').text();

        alert(data);
        console.log('press edit');
    })
})
</script>

Answer 1

Я думаю, что большинство сайтов, в том числе StackOverflow, делают это с помощью встроенных в браузер возможностей «режима дизайна».

Здесь - версия такого редактора с открытым исходным кодом.

Я изменил ваш пример так, что нажатие на ссылку редактирования сделает текст «bla bla bla» редактируемым.

Обратите внимание на две вещи:

1. У тега body есть новый атрибут designMode , установленный на «on».
2. Чтобы включить редактирование, атрибуту div необходимо присвоить атрибуту contentEditbale значение true.

Answer 2

Я думаю, ты почти у цели.Если данные для редактирования очень просты, вы можете просто сделать что-то вроде:

$(function() {
    $('#frame a').click(function()
    {
        $('#frame').html('<form action="..." method="post"><textarea name="data">' + 
          $('#data').text() + 
          '</textarea><input type="submit" value="Edit"></form>');
    })
})

Если данные для редактирования являются более сложными, вы можете загрузить их через AJAX или поместить всю форму для редактирования внутриHTML и скрыть его по умолчанию.Если пользователь нажимает кнопку редактирования, вам просто нужно показать ее.