我想从我的网站管理员,能够改变一些页面的文本。使用contentediteble将是完美的我。 问题是,我只知道如何在PHP程序。我已经在互联网上搜索了几个小时试图使其为我工作,但我只是不明白,用于存储数据足够的编程语言,使其工作。
这是我怎么想它的工作: 1.管理员点击一个按钮,编辑 2.格变为可编辑。 3.当管理员准备edditing,他打一个按钮保存 4.数据被保存到一个文件或数据库(真的不知道什么是最好的选择)。 5.编辑的内容显示了被打开的页面时。
这是我对现在的:
< DIV CLASS ='big_wrapper'CONTENTEDITABLE>
页面内容
< / DIV>
我知道如何使零件与格转换为CONTENTEDITABLE股利时,管理员点击编辑。 我的问题是,我真的不知道如何保存编辑的数据。 我也不知道这将是很难从一个文件中检索数据,depents如何保存数据的方式。如果它被保存到数据库中,我也没问题检索它,但我不知道这是否是可能的,如果这是最好的选择。
感谢您的帮助,
塞缪尔
编辑:
@gibberish,非常感谢你为你的超快速回复! 我试图使它的工作,但它不工作呢。我想不出有什么我做错了。
下面是我的code: over_ons.php
< DIV CLASS ='big_wrapper'CONTENTEDITABLE>
页面内容
< / DIV>
<输入类型=按钮值='发送数据ID =mybutt'>
<脚本类型=文/ JavaScript的>
$('#mybutt)。点击(函数(){
VAR myTxt的= $('。big_wrapper)HTML()。
$阿贾克斯({
类型:'后',
网址:sent_data.php,
数据:'varname的='+ myTxt的+'和; anothervar ='+ moreTxt
});
});
< / SCRIPT>
sent_data.php
< PHP
在session_start();
include_once(./ main.php');
包括:($主.'connectie.php');
$ tekst = $ _ POST ['myTxt的'];
$查询=更新PAGINAS SET inhoud ='。$ tekst。 'WHERE ID ='1';
的mysql_query($查询);
?>
再次感谢您的帮助很大! 你也可以帮我,只有当用户点击一个按钮,使DIV可编辑?
解决方案:
我花了2个星期终于使everyting工作。我不得不学习JavaScript,jQuery和阿贾克斯。但现在它完美的作品。我甚至增加了一些额外的花哨:) 我想和大家分享我是如何做到这一点,如果有人想这样做。
over_ons.php
//活动页面:
$ pagina ='over_ons'; ?>
<输入类型=隐藏ID =pagina价值='<?PHP的echo $ pagina; ?>'> <! - 显示当前页面的JavaScript - >< PHP
//活跃用户:
如果(使用isset($ _ SESSION ['correct_ingelogd'])和$ _SESSION ['functie'] =='管理员'){
$编辑= $ _SESSION ['gebruikersnaam']; ?>
<输入类型=隐藏ID ='编辑'值='<?PHP的echo $编辑; ?>'> <! - 显示活跃用户的JavaScript - >< PHP
?}>
< - 可编辑DIV: - >
< DIV CLASS ='big_wrapper'ID ='编辑'>
< PHP
//从数据库中eddited页面内容
$查询=请求mysql_query(选择inhoud从PAGINAS WHERE naam_pagina ='$ pagina。');
而($ inhoud_test = mysql_fetch_array($查询)){
$ inhoud = $ inhoud_test [0];
}
//显示内容
回声$ inhoud;
?>
< / DIV>
<! - 显示编辑按钮 - >
< PHP
如果(使用isset($ _ SESSION ['correct_ingelogd'])和$ _SESSION ['functie'] ==管理员)
{&GT?;
< DIV ID ='题外话'>
<输入类型=按钮值='Bewerken'ID ='sent_data级=按钮/>
< DIV ID =反馈/>
< / DIV>
< PHP}
由于这是一个pretty的长期和复杂的文件,我试着翻译我的大部分意见英语。 如果你想翻译的东西,in't已翻译,原来的语言是荷兰语。 javascript.js
//如果系统是在编辑模式下,用户试图离开页面,
//让用户知道它不是那么聪明离开呢。
$(窗口).bind('beforeunload',函数(){
VAR值= $('#sent_data)ATTR('值')。 //改变编辑按钮的名称
如果(价值=='Verstuur bewerkingen'){
返回您确定要离开这个页面?所有未保存的修改将会丢失!;
}
});
//使内容编辑
$('#sent_data)。点击(函数(){
VAR值= $('#sent_data)ATTR('值')。 //改变编辑按钮的名称
如果(价值=='Bewerken'){
$('#sent_data)ATTR('值','Verstuur bewerkingen)。 //改变编辑按钮的名称
变量$股利= $('#可编辑),isEditable = $ div.is('编辑'); //使DIV可编辑
$ div.prop('CONTENTEDITABLE'!isEditable).toggleClass('编辑')
$('#反馈)HTML('< P类=opvallend>来自以下的内容; BR>这页是现在< BR>编辑< / P>');
}否则,如果(价值=='Verstuur bewerkingen'){
VAR pagina = $('#pagina)VAL()。
VAR编辑= $('#编辑器)VAL()。
。VAR div_inhoud = $(#可编辑)HTML();
$阿贾克斯({
键入:POST,
网址:sent_data.php,
数据:tekst ='+ div_inhoud +'和; pagina ='+ pagina +'和;主编='+编辑器,
成功:功能(数据){
更改DIV回来TOT不可编辑,并更改按钮的名称
$('#sent_data)ATTR('值','Bewerken)。 //改变编辑按钮的名称
变量$股利= $('#可编辑),isEditable = $ div.is('编辑'); //使格不可编辑
$ div.prop('CONTENTEDITABLE'!isEditable).toggleClass('编辑')
//告诉用户,如果edditing是成功地
$('#反馈)HTML(数据)。
的setTimeout(函数(){
VAR值= $('#sent_data)ATTR('值')。 //查找编辑按钮的名称
如果(价值=='Bewerken'){//只有当该按钮的名称是'bewerken,带走的帮助文本
$('#反馈)文本('')。
}
},5000);
}
}),失败(函数(){
//如果有一个错误,让用户知道
$('#反馈)HTML('< P类=opvallend>有一个错误与LT; BR>你的变化都与LT; BR>尚未保存< BR>请重试< / P>');
});
}
});
最后, sent_data.php
< PHP
在session_start();
include_once(./ main.php');
包括:($主.'connectie.php');
//查找巫婆页面已被修改
$ pagina = $ _ POST ['pagina'];
//获取谁eddited页面的人的名字
$编辑= $ _ POST ['编辑'];
//获取内容:
$ tekst = $ _ POST ['tekst'];
$ tekst = mysql_real_escape_string($ tekst);
$查询=UPDATE PAGINAS SET naam_editer ='。$编辑器。 ',inhoud ='。$ tekst。 'WHERE naam_pagina ='。$ pagina。 ';
}
如果(的mysql_query($查询)){
回声&其中,P级='opvallend'>成功保存修改< / P>中;
}其他{
回声&其中,P级='opvallend'>更改保存失败< BR>
请重试< / P>中;
}
?>
解决方案
使用客户端的语言,例如JavaScript(或最佳,jQuery的),来管理输入框是否可以编辑。
使用AJAX来获取现场数据,并启动它开了一个PHP文件,该文件将坚持在数据库中的数据。
下面是使用jQuery来管理启用/禁用输入字段非常简单的例子:
的jsfiddle演示
$('编辑')丙(禁用,真正的)。
$('。editbutt)。点击(函数(){
VAR NUM = $(本).attr('身份证')分裂(' - ')[1]。
$('#编辑 - '+ NUM).prop(禁用,假).focus();
});
$('。可编辑)。模糊(函数(){
VAR myTxt的= $(本).VAL();
$阿贾克斯({
类型:'后',
网址:some_php_file.php,
数据:'varname的='+ myTxt的+'和; anothervar ='+ moreTxt
});
});
PHP文件:some_php_file.php
< PHP
$ myVar的= $ _ POST ['varname的'];
$ secondVar = $ _ POST ['anothervar'];
//现在,做你想做的与在瓦尔数据
使用AJAX是很容易的。我给它的样子很简单的例子。别看在HTML或jQuery的为 moreTxt
变量 - 我补充说,向您展示如何将数据添加的第二个变种的AJAX
下面是一些基本的例子来让您快速Ajax的:
AJAX使用jQuery 请求回调
没有短路径学习的jQuery或AJAX。阅读实例和实验。的
您可以在这里找到一些优秀的,免费的jQuery教程:
http://thenewboston.com
http://phpacademy.org
更新编辑:
要回复您的评论询问:
要从DIV数据发送到PHP文件,首先你需要一个事件触发code。至于你提到的在输入栏上,这可能是模糊()
事件,当您离开现场时触发。在一个<选择>
,也可以是的变化()
事件,当你选择一个选择,触发。但在一个DIV ...好,用户不能用一个div互动,对不对?触发器必须有一些用户的确实,如点击一个按钮。
因此,用户点击一个按钮 - 你可以得到的DIV使用的.html()
命令的内容。 (在输入框和选择控件,你可以使用 .VAL()
,但div和表格单元格,你必须使用的.html() code是这样的:
如何发送DIV内容的按钮,点击后:
HTML:
< DIV CLASS ='big_wrapper'CONTENTEDITABLE>
页面内容
< / DIV>
<输入ID =mybutt类型=按钮值=发送数据/>
jQuery的:
$('#mybutt)。点击(函数(){
VAR myTxt的= $('。big_wrapper)HTML()。
$阿贾克斯({
类型:'后',
网址:some_php_file.php,
数据:'varname的='+ myTxt的+'和; anothervar ='+ moreTxt
});
});
I want the admins from my website to be able to change the text of some pages. Using contentediteble would be perfect for me. Problem is that I only know how to program in PHP. I have searched on the internet for hours trying to make it work for me, but I just don't understand the programming languages used to store the data enough to make it work.
This is how i would like it to work: 1. Admin hits a button 'edit' 2. div becomes editable. 3. When the admin is ready edditing, he hits a button 'save' 4. The data is saved to a file or database (don't really know what would be the best option). 5. The edited content shows up when the page is opened.
This is all I have for now:
<div class='big_wrapper' contenteditable>
PAGE CONTENT
</div>
I know how to make the part with converting the div to an contenteditable div when the admin hits 'edit'. My problem is that i really have no idea how to save the edited data. I also don't know if it would be hard to retrieve the data from a file, depents on the way how the data is saved. If it is saved to a database I would have no problem retrieving it, but I don't know if that is possible and if that is the best option.
Thanks for your help,
Samuël
EDIT:
@gibberish, thank you so much for your super-quick reply! I tried to make it work, but it doesn't work yet. I can not figure out what i'm doing wrong.
Here's my code: 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);
?>
Thanks again for your great help! Can you also help me to make the div editable only when the user hits a button?
SOLUTION:
It took me over 2 weeks to finally make everyting work. I had to learn javascript, jQuery and Ajax. But now it works flawlessly. I even added some extras for the fanciness :) I would like to share how i did this if someone wants to do the same.
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 }
As this is a pretty long and complicated file, I tried to translate most of my comments to english. If you want to translate something that in't already translated, the original language is Dutch. 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>');
});
}
});
And finally, 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>";
}
?>
解决方案
Use a client-side language, such as JavaScript (or best, jQuery), to manage whether the input boxes could be edited.
Use AJAX to grab the field data and fire it off to a PHP file, which would stick the data in your database.
Here is a very simplified example of using jQuery to manage enabling/disabling the input fields:
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 file: some_php_file.php
<?php
$myVar = $_POST['varname'];
$secondVar = $_POST['anothervar'];
//Now, do what you want with the data in the vars
Using AJAX is quite easy. I gave a very brief example of what it would look like. Don't look in the HTML or jQuery for the moreTxt
variable -- I added that to show how you would add a second var of data to the ajax.
Here are some basic examples to bring you up to speed on ajax:
AJAX request callback using jQuery
There is no short path to learning jQuery or AJAX. Read the examples and experiment.
You can find some excellent, free jQuery tutorials here:
http://thenewboston.com
http://phpacademy.org
UPDATE EDIT:
To respond to your comment inquiry:
To send data from a DIV to a PHP file, first you need an event that triggers the code. As you mentioned, on an input field, this can be the blur()
event, which triggers when you leave a field. On a <select>
, it can be the change()
event, which triggers when you choose a selection. But on a DIV... well, the user cannot interact with a div, right? The trigger must be something that the user does, such as clicking a button.
So, the user clicks a button -- you can get the content of the DIV using the .html()
command. (On input boxes and select controls, you would use .val()
, but on DIVs and table cells you must use .html()
. Code would look like this:
How to send DIV content after a button clicked:
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
});
});