On-the-fly text editing

Good afternoon.
Can you please tell me how to edit the text directly on the page? For example, there is a text taken from the database, when you press the edit button, the text changes to <textarea> </textarea>. The user makes changes, clicks on the save button and the text is updated. How to implement this?

Answer 1, authority 100%

Somewhere I already wrote this, but oh well.

<div id="pagecontent">text</div>
<div id="pagecontrols">
    <img src="img/i.gif" alt="" class="icon3edit pageedit" />
<script type="text/javascript">
    var c = $('#pagecontent');
    c.html('<textarea id="pageeditor" cols="80" rows="10">'+c.html()+'</textarea>');
    $(this).toggleClass('icon3edit icon3ok');
}, function(){
    $.post(__ADRESS__, {'text': $('#pageeditor').val()}, function(data){
    $(this).toggleClass('icon3edit icon3ok');

Using jQuery, sending message to __ADRESS__. Well, there is an embellishment in the form of an icon.

Answer 2

google info about contentEditable

Answer 3

As soon as the text has been changed, the user applies the changes by pressing a button, by pressing you replace the text in the database (if you could pull it out and write it down, yes), so that everything works beautifully, it would be good to use ajax for this. Implement it like this first, then read about ajax.