Question

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

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

这就是我现在所拥有的一切：

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

当管理员点击“编辑”时，我知道如何制作将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可编辑？

解：

我花了两个多星期才终于完成了各项工作。我必须学习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>');
                    });
    }
});

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

Answer 1

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

使用AJAX获取字段数据并将其激活到PHP文件，这会将数据粘贴到数据库中。

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

jsFiddle Demo

$('.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的基本示例：

AJAX request callback using jQuery

学习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
    });

});

Answer 2

您可以保存整个页面客户端：

a or b

hth

如何保存和检索可疑数据

2 个答案: