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

Question

我希望我网站的管理员能够更改某些页面的文本。使用满足感对于我来说是完美的。
问题是我只知道如何用PHP编程。我已经在互联网上搜索了数小时，试图使它对我有用，但是我只是不理解用于存储数据以使其有效的编程语言。

这就是我希望的工作方式：
1.管理员点击“编辑”按钮
2. div可编辑。
3.当管理员准备好编辑时，他点击“保存”按钮
。4.数据被保存到文件或数据库中（不知道什么是最好的选择）。
5.打开页面后，将显示编辑的内容。

这就是我现在所拥有的：

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

我知道当管理员点击“ edit”时如何将div转换为contenteditable div来制作零件。
我的问题是我真的不知道如何保存编辑后的数据。
我也不知道从文件中检索数据是否困难，这取决于如何保存数据。如果将其保存到数据库中，则检索它不会有任何问题，但是我不知道这是否可行，这是否是最佳选择。

谢谢你的帮助，

萨穆尔

编辑：

@gibberish，非常感谢您的超快速回复！
我试图使其正常工作，但目前尚无法正常工作。我不知道我在做什么错。

这是我的代码：
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);
?>

再次感谢您的大力帮助！
您还可以帮助我仅在用户单击按钮时使div可编辑吗？

解决方案 ：

我花了2个多星期才终于使一切顺利。我必须学习javascript，jQuery和Ajax。但是现在它可以完美地工作了。我什至还为幻想添加了一些额外功能:)
如果有人想做同样的事情，我想分享一下我是如何做到的。

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 }

由于这是一个非常长且复杂的文件，因此我尝试将大部分评论翻译成英语。
如果您要翻译尚未翻译的内容，则原始语言为荷兰语。
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>');
                    });
    }
});

最后，
send_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>";
    }
?>

Answer 1

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

使用AJAX捕获字段数据并将其发射到PHP文件，该文件会将数据粘贴在数据库中。

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

jsFiddle演示

$('.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文件：some_php_file.php

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

使用AJAX非常容易。我给出了一个非常简短的示例，说明它的外观。不要在HTML或jQuery中查找moreTxt变量-
我添加了它，以显示如何向ajax添加第二个数据变量。

以下是一些基本示例，可帮助您快速掌握Ajax：

使用jQuery的AJAX请求回调

学习jQuery或AJAX并非没有捷径。 阅读示例并进行实验。

您可以在此处找到一些出色的免费jQuery教程：

http://thenewboston.com

http://phpacademy.org

更新编辑：

回应您的评论查询：

要将数据从DIV发送到PHP文件，首先需要一个触发代码的 事件
。如您提到的，在输入字段上，这可能是blur()事件，当您离开字段时触发。在上<select>，可以是change()事件，该事件在您选择一个选项时触发。但是在DIV上…好吧，用户无法与div交互，对吗？触发器必须是用户
执行的操作 ，例如单击按钮。

因此，用户单击一个按钮-
您可以使用.html()命令获取DIV的内容。（在输入框和选择控件上，您将使用.val()，但在DIV和表单元格上，您必须使用.html()。代码如下所示：

单击按钮后如何发送DIV内容：

HTML：

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

jQuery的：

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

});