How to make an online article editor?

The bottom line: the site has a bunch of articles. It is necessary that there was a button / link, when clicked, the div containing the article was replaced with a textarea. In which this article would be with html tags. And a “save” button.
And, it is desirable that all this happens without reloading the page…


Answer 1, authority 100%

<div class="articles">
    <div class="article">
        <p></p>
        <p></p>
        <b></b>
    </div>
    <span class="article_edit">edit</span>
</div>
<script type="text/javascript">
    $('.article_edit').toggle(
        function(){
            var t = $(this);
            var ar = t.closest('.articles').find('.article').eq(0);
            ar.html('<textarea cols="50" rows="10">'+ar.html()+'</textarea>');
            t.html('save');
        }, function(){
            var t = $(this);
            var ar = t.closest('.articles').find('.article textarea').eq(0);
            t.html('loading...');
            /*
            $.post('saveArticle.php', {'text': ar.val()}, function(data){
                t.closest('.articles').find('.article').eq(0).html(data); //php      
                t.html('edit');
            });
            */
            t.closest('.articles').find('.article').eq(0).html(ar.val());
            t.html('edit');
        }
    );
</script>

Will you figure out what’s what?