Wie zum speichern und abrufen von contenteditable Daten

Möchte ich die admins von meiner website in der Lage sein, den text zu ändern von einigen Seiten. Mit contentediteble wäre perfekt für mich.
Problem ist, ich weiß nur, wie man Programm in PHP. Ich habe gesucht im internet für Stunden versuchen, damit es funktioniert für mich, aber ich weiß einfach nicht verstehen wie Programmiersprachen verwendet, um die Daten zu speichern genug, um es arbeiten.

Dies ist, wie ich es möchte, um zu arbeiten:
1. Admin hat einen button 'Bearbeiten'
2. div editierbar.
3. Wenn der admin bereit ist, edditing, er trifft eine Schaltfläche "speichern"
4. Die Daten werden in einer Datei oder Datenbank (weiß nicht wirklich, was wäre die beste option).
5. Der bearbeitete Inhalt wird angezeigt, wenn die Seite geöffnet wird.

Dies ist alles was ich habe jetzt:

<div class='big_wrapper' contenteditable>
  PAGE CONTENT
</div>

Ich weiß, wie man den Teil mit der Umwandlung der div eine contenteditable div, wenn der admin hat 'Bearbeiten'.
Mein problem ist, dass ich wirklich keine Ahnung, wie das speichern der bearbeiteten Daten.
Ich weiß auch nicht, ob es hart werden würde, zum abrufen der Daten aus einer Datei, depents auf die Art und Weise, wie die Daten gespeichert sind. Wenn es in einer Datenbank gespeichert, die ich kein problem haben würde, abrufen es, aber ich weiß nicht, ob das möglich ist und wenn, dass ist die beste option.

Danke für Eure Hilfe,

Samuël

 

EDIT:

@Kauderwelsch, vielen Dank für deine super-schnelle Antwort!
Ich habe versucht, damit es funktioniert, aber es funktioniert noch nicht. Ich kann nicht herausfinden, was ich falsch mache.

Hier ist mein code:
over_ons.php:

<div class='big_wrapper' contenteditable>
  PAGE CONTENT
</div>

<input type='button' value='Send Data' id='mybutt'>

<script type="text/javascript">
  $('#mybutt').click(function(){
  var myTxt = $('.big_wrapper').html();
  $.ajax({
      type: 'post',
      url:  'sent_data.php',
      data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
  });

});
</script>

sent_data.php:

<?php
 session_start();
include_once('./main.php');
include($main .'connectie.php');

$tekst=$_POST['myTxt'];

$query="UPDATE paginas SET inhoud='" .$tekst. "' WHERE id='1'";

mysql_query($query);
?>

Dank wieder für Ihre große Hilfe!
Können Sie mir auch helfen, um das div nur Bearbeiten, wenn der Nutzer auf eine Schaltfläche?

 

LÖSUNG:

Es dauerte über 2 Wochen bis endlich alles funktioniert. Ich musste lernen, javascript, jQuery und Ajax. Aber jetzt funktioniert es einwandfrei. Ich fügte sogar ein paar extras für die fanciness 🙂
Ich möchte zu teilen, wie ich Tat dies, wenn jemand will, das gleiche zu tun.

over_ons.php:

//Active page:
$pagina = 'over_ons'; ?>
<input type='hidden' id='pagina' value='<?php echo $pagina; ?>'> <!--Show active page to javascript--><?php
//Active user:
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin'){
$editor = $_SESSION['gebruikersnaam']; ?>
<input type='hidden' id='editor' value='<?php echo $editor; ?>'> <!--Show active user to javascript--><?php  
} ?>

<!--Editable DIV: -->
<div class='big_wrapper' id='editable'>
    <?php
        //Get eddited page content from the database
        $query=mysql_query("SELECT inhoud FROM paginas WHERE naam_pagina='" .$pagina. "'");
        while($inhoud_test=mysql_fetch_array($query)){
            $inhoud=$inhoud_test[0];
        }

        //Show content
        echo $inhoud;
    ?>
</div>

<!--Show edit button-->
<?php
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin')
{?>
    <div id='sidenote'>
        <input type='button' value='Bewerken' id='sent_data' class='button' />
        <div id="feedback" />
    </div>
<?php }

Da dies eine ziemlich lange und komplizierte Datei, ich habe versucht zu übersetzen, die meisten meiner Kommentare auf Englisch.
Wenn Sie wollen, etwas zu übersetzen, dass in nicht bereits übersetzt, die original-Sprache ist Holländisch.

javascript.js:

//If the system is in edit mode and the user tries to leave the page,
//let the user know it is not so smart to leave yet.
$(window).bind('beforeunload', function(){
var value = $('#sent_data').attr('value'); //change the name of the edit button

if(value == 'Verstuur bewerkingen'){
    return 'Are you sure you want to leave the page? All unsaved edits will be lost!';
}
});

//Make content editable
$('#sent_data').click(function(){
    var value = $('#sent_data').attr('value'); //change the name of the edit button

    if(value == 'Bewerken'){
        $('#sent_data').attr('value', 'Verstuur bewerkingen');  //change the name of the edit button
        var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div editable
        $div.prop('contenteditable',!isEditable).toggleClass('editable')
        $('#feedback').html('<p class="opvallend">The content from<BR>this page is now<BR>editable.</p>');
    }else if(value == 'Verstuur bewerkingen'){
                var pagina = $('#pagina').val();
                var editor = $('#editor').val();
                var div_inhoud = $("#editable").html();
                $.ajax({
                type: 'POST',
                url:  'sent_data.php',
                data: 'tekst=' +div_inhoud+ '&pagina=' +pagina+ '&editor=' +editor,
                success: function(data){
                Change the div back tot not editable, and change the button's name
                    $('#sent_data').attr('value', 'Bewerken');  //change the name of the edit button
                    var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div not editable
                    $div.prop('contenteditable',!isEditable).toggleClass('editable')

                //Tell the user if the edditing was succesfully
                    $('#feedback').html(data);
                    setTimeout(function(){
                        var value = $('#sent_data').attr('value'); //look up the name of the edit button
                        if(value == 'Bewerken'){ //Only if the button's name is 'bewerken', take away the help text
                        $('#feedback').text('');
                        }
                        }, 5000);
                    }
                    }).fail(function() {
                    //If there was an error, let the user know
                        $('#feedback').html('<p class="opvallend">There was an error.<BR>Your changes have<BR>not been saved.<BR>Please try again.</p>');
                    });
    }
});

Und schließlich
sent_data.php:

<?php
session_start();
include_once('./main.php');
include($main .'connectie.php');

//Look up witch page has to be edited
$pagina=$_POST['pagina'];
//Get the name of the person who eddited the page
$editor=$_POST['editor'];
//Get content:
$tekst=$_POST['tekst'];
$tekst = mysql_real_escape_string($tekst);

$query="UPDATE paginas SET naam_editer='" .$editor. "', inhoud='" .$tekst. "' WHERE naam_pagina='" .$pagina. "'";

}
    if(mysql_query($query)){
        echo "<p class='opvallend'>Successfully saves changes.</p>";
    }else{
        echo "<p class='opvallend'>Saving of changes failed.<BR>
        Please try again.</p>";
    }
?>

InformationsquelleAutor der Frage Samuël Visser | 2014-09-11