我希望能够更改某些页面的文本。使用 contenteditable 对我来说是完美的。
问题是我只知道如何用 PHP 编程。我在 Internet 上搜索了几个小时，试图让它发挥作用，但我只是不了解用于存储足以使其发挥作用的数据的编程语言。
这就是我希望它的工作方式:
- 管理员点击“编辑”按钮
- div 变得可编辑。
- 当管理员准备好编辑时，他点击“保存”按钮
- 数据被保存到一个文件或数据库(不知道什么是最好的选择)。
- 打开页面时显示编辑的内容。
这就是我现在所拥有的:
<div class="big_wrapper" contenteditable>
PAGE CONTENT
</div>
我知道如何在管理员点击“编辑”时将 div 转换为可编辑的 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>
发送数据.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>');
});
}
});
最后，
发送数据.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 来管理启用/禁用输入字段的非常简单的示例:
$('.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 教程:
更新编辑:
回复您的评论查询:
要将数据从 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
});
});
关于php - 如何保存和检索内容可编辑的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25790268/