Php 如何保存和检索内容可编辑数据

我希望能够更改某些页面的文本。使用contenteditable将非常适合我。
问题是我只知道如何用PHP编程。我已经在互联网上搜索了好几个小时，试图让它工作，但我只是不理解用来存储足够数据以使其工作的编程语言

我希望它是这样工作的：

管理员点击“编辑”按钮

div变为可编辑。

管理员准备编辑时，点击“保存”按钮

数据保存到文件或数据库中（不知道什么是最佳选项）。

页面打开时会显示编辑的内容。

这就是我目前所拥有的一切：

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

页面内容

我知道如何在管理员点击“编辑”时将div转换为contenteditable div来制作部件。
我的问题是，我真的不知道如何保存编辑的数据。
我也不知道从文件中检索数据是否困难，这取决于数据的保存方式。如果它被保存到一个数据库，我将不会有问题检索它，但我不知道这是否是可能的，如果这是最好的选择

谢谢你的帮助

萨穆埃尔

编辑：

@胡言乱语，非常感谢您的快速回复
我试着让它工作，但它还没有工作。我不知道我做错了什么

这是我的代码：
通过_ons.php：

页面内容
$（'#mybutt'）。单击（函数（）{
var myTxt=$（'.big_wrapper'）.html（）；
$.ajax({
键入：“post”，
url:'sent_data.php'，
数据：“varname=”+myTxt+”&anothervar=”+moreTxt
});
});

sent_data.php：

使用客户端语言，如JavaScript（或最好的jQuery），来管理输入框是否可以编辑

使用AJAX获取字段数据并将其发送到一个PHP文件，该文件会将数据粘贴到数据库中

下面是一个使用jQuery管理启用/禁用输入字段的非常简单的示例：


PHP文件：一些PHP文件.PHP

<?php 
    $myVar = $_POST['varname'];
    $secondVar = $_POST['anothervar'];
    //Now, do what you want with the data in the vars

jQuery：

$('#mybutt').click(function(){
    var myTxt = $('.big_wrapper').html();
    $.ajax({
        type: 'post',
        url:  'some_php_file.php',
        data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
    });

});

你可以拯救整个世界
在客户端使用以下内容进行页面设置：

    <script>
function saveAs(filename, allHtml) {
allHtml =  document.documentElement.outerHTML; 
var blob = new Blob([allHtml], {type: 'text/csv'});
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;        
document.body.appendChild(elem);
elem.click();        
document.body.removeChild(elem);
}
}    
</script> 


函数saveAs（文件名，所有HTML）{
allHtml=document.documentElement.outerHTML；
var blob=new blob（[allHtml]，{type:'text/csv'}）；
if（window.navigator.msSaveOrOpenBlob）{
window.navigator.msSaveBlob（blob，文件名）；
}
否则{
var elem=window.document.createElement（'a'）；
elem.href=window.URL.createObjectURL（blob）；
elem.download=文件名；
文件.正文.附件（elem）；
元素单击（）；
文件.body.removeChild（elem）；
}
}    

hth
我一直在尝试通过阅读Totorial来学习jQuery和AJAX。我了解到模糊事件只对输入字段有效。我不需要输入字段，而是一个div。将数据从div发送到php文件的最佳方式是什么？顺便说一下，在您的示例中，您使用按钮使输入字段可编辑。我尝试了很多方法使div仅在按下按钮时才可编辑，但无法使其工作。对我来说，只使用PHP使div可编辑也没关系，但也许jQuery很简单，也许你可以解释一下如何在jQuery中使用buton使div可编辑？我现在完成了使div可编辑的部分，只使用PHP和我习惯使用的表单。现在唯一的事情就是让“发送数据”按钮工作，并将div中的文本发送到php文件。（顺便说一句，我在没有使用jQuery的情况下测试了PHP文件，它确实可以工作。因此我确信数据还没有发送到PHP文件，如果是，数据将在数据库中）请，请，请。。。仔细阅读我上面的完整答案。试试看。然后，尝试一下这些AJAX链接中的每一个——做一点实验。我保证，你将在大约45分钟内完成所有工作（允许30分钟学习/测试），你将对最终结果非常满意。你已经在这个问题上工作了好几个小时了——你会失去什么呢？我不太明白为什么，但是加上是的，你需要它，因为
$（'class\u或\u id'）。
语法是jQuery——任何时候你看到它，代码都是jQuery——所以你需要加载jQuery库。这三个相互关联的例子也表明了这一点。看看这些---我自己也从他们身上学到了很多。这并不是OP想要的<代码>msSaveBlob

也是非标准且过时的。更不用说代码是不可读的。我建议跳过这个答案。

//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>');
                    });
    }
});

<?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>";
    }
?>

$('.editable').prop('disabled',true);

$('.editbutt').click(function(){
    var num = $(this).attr('id').split('-')[1];
    $('#edit-'+num).prop('disabled',false).focus();
});

$('.editable').blur(function(){
    var myTxt = $(this).val();
    $.ajax({
        type: 'post',
        url:  'some_php_file.php',
        data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
    });
});

<?php 
    $myVar = $_POST['varname'];
    $secondVar = $_POST['anothervar'];
    //Now, do what you want with the data in the vars

<div class='big_wrapper' contenteditable>
    PAGE CONTENT
</div>
<input id="mybutt" type="button" value="Send Data" />

$('#mybutt').click(function(){
    var myTxt = $('.big_wrapper').html();
    $.ajax({
        type: 'post',
        url:  'some_php_file.php',
        data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
    });

});

    <script>
function saveAs(filename, allHtml) {
allHtml =  document.documentElement.outerHTML; 
var blob = new Blob([allHtml], {type: 'text/csv'});
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;        
document.body.appendChild(elem);
elem.click();        
document.body.removeChild(elem);
}
}    
</script>