Ich möchte den Text einiger Seiten ändern können. Die Verwendung von contenteditable wäre perfekt für mich.
Das Problem ist, dass ich nur in PHP programmieren kann. Ich habe stundenlang im Internet gesucht, um es zum Laufen zu bringen, aber ich verstehe einfach nicht die Programmiersprachen, die verwendet werden, um die Daten ausreichend zu speichern, damit es funktioniert.
So möchte ich, dass es funktioniert:
- Der Administrator drückt auf die Schaltfläche „Bearbeiten“.
- div wird bearbeitbar.
- Wenn der Administrator mit der Bearbeitung fertig ist, drückt er auf die Schaltfläche „Speichern“.
- Die Daten werden in einer Datei oder Datenbank gespeichert (weiß nicht wirklich, was die beste Option wäre).
- Der bearbeitete Inhalt wird angezeigt, wenn die Seite geöffnet wird.
Das ist alles, was ich jetzt habe:
<div class="big_wrapper" contenteditable>
PAGE CONTENT
</div>
Ich weiß, wie man das Teil macht, indem man das Div in ein contenteditable Div umwandelt, wenn der Administrator auf „Bearbeiten“ klickt.
Mein Problem ist, dass ich wirklich keine Ahnung habe, wie ich die bearbeiteten Daten speichern soll.
Ich weiß auch nicht, ob es schwierig wäre, die Daten aus einer Datei abzurufen, hängt davon ab, wie die Daten gespeichert werden. Wenn es in einer Datenbank gespeichert ist, hätte ich kein Problem, es abzurufen, aber ich weiß nicht, ob das möglich ist und ob das die beste Option ist.
Danke für Ihre Hilfe,
Samuel
BEARBEITEN:
@gibberish, vielen Dank für deine superschnelle Antwort!
Ich habe versucht, es zum Laufen zu bringen, 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);
?>
Nochmals vielen Dank für Ihre großartige Hilfe!
Können Sie mir auch helfen, das div nur dann bearbeitbar zu machen, wenn der Benutzer eine Schaltfläche drückt?
LÖSUNG:
Ich habe über 2 Wochen gebraucht, um endlich alles zum Laufen zu bringen. Ich musste Javascript, jQuery und Ajax lernen. Aber jetzt funktioniert es einwandfrei. Ich habe sogar ein paar Extras für die Extravaganz hinzugefügt 🙂
Ich würde gerne teilen, wie ich das gemacht habe, wenn jemand das Gleiche tun möchte.
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 ist, habe ich versucht, die meisten meiner Kommentare ins Englische zu übersetzen.
Wenn Sie etwas übersetzen möchten, das noch nicht übersetzt ist, ist die Originalsprache Niederlä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 schlussendlich,
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>";
}
?>