我希望我网站的管理员能够更改某些页面的文本。使用满足感对于我来说是完美的。 问题是我只知道如何用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>"; } ?>
使用客户端语言(例如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添加第二个数据变量。
moreTxt
以下是一些基本示例,可帮助您快速掌握Ajax:
使用jQuery的AJAX请求回调
学习jQuery或AJAX并非没有捷径。 阅读示例并进行实验。
您可以在此处找到一些出色的免费jQuery教程:
http://thenewboston.com
http://phpacademy.org
更新编辑:
回应您的评论查询:
要将数据从DIV发送到PHP文件,首先需要一个触发代码的 事件 。如您提到的,在输入字段上,这可能是blur()事件,当您离开字段时触发。在上<select>,可以是change()事件,该事件在您选择一个选项时触发。但是在DIV上…好吧,用户无法与div交互,对吗?触发器必须是用户 执行的操作 ,例如单击按钮。
blur()
<select>
change()
因此,用户单击一个按钮- 您可以使用.html()命令获取DIV的内容。(在输入框和选择控件上,您将使用.val(),但在DIV和表单元格上,您必须使用.html()。代码如下所示:
.html()
.val()
单击按钮后如何发送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 }); });