jquery编辑评论

Question

你能解释一下制作jquery编辑系统的方法吗？点击一下，然后它会显示一个textarea和一个编辑底部。

最好的方法是什么？

现在我有这个：

<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在内。

Here是此类编辑器的开源版本。

我修改了你的例子，点击编辑链接会使“bla bla bla”文本可编辑。

请注意两件事：

1. body标签有一个新属性 designMode ，设置为“on”。
2. 要启用编辑，数据div必须将 contentEditbale 属性设置为 真。

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内部并默认隐藏它。如果用户单击编辑按钮，您只需要显示它。