您将在下面找到指向我的 contenteditable DIV 页面的链接，标题为 ce.php：
http://stateofdebate.com/ce.php
我对这个问题的渴望是找到一个答案，以了解如何在文本更改时使用 Comet/reverse AJAX 立即为所有用户更新页面上的文本。目前，它被保存到我的 mySQL 数据库中，并且仅当其他用户刷新页面时才会更新文本。
请不要给出“使用 WebSocket”或“使用 node.js”之类的模糊答案。我已经问过一个与此类似的问题并得到了这些答案。要获得我的投票或检查，我需要完整的答案或教程链接。
我觉得这样，虽然一个带有特定代码的特定问题，如果得到彻底和正确的回答，可以帮助很多有类似问题的人。
这是我的完整代码：
CE.PHP
<!doctype html>
<head>
<meta charset="utf-8">
<title>Gazpo.com - HTML5 Inline text editing and saving </title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet'
type='text/css'>
<style>
body {
font-family: Helvetica,Arial,sans-serif;
color:#333333;
font-size:13px;
}
h1{
font-family: 'Droid Serif', Georgia, Times, serif;
font-size: 28px;
}
a{
color: #0071D8;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
:focus {
outline: 0;
}
#wrap{
width: 500px;
margin:0 auto;
overflow:auto;
}
#content{
background: #f7f7f7;
border-radius: 10px;
}
#editable {
padding: 10px;
}
#status{
display:none;
margin-bottom:15px;
padding:5px 10px;
border-radius:5px;
}
.success{
background: #B6D96C;
}
.error{
background: #ffc5cf;
}
#footer{
margin-top:15px;
text-align: center;
}
#save{
display: none;
margin: 5px 10px 10px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 12px/100% Arial, Helvetica, sans-serif;
font-weight:700;
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#ededed');
}
#save:hover
{
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#dcdcdc');
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#save").click(function (e) {
var content = $('#editable').html();
$.ajax({
url: 'save.php',
type: 'POST',
data: {
content: content
},
success:function (data) {
if (data == '1')
{
$("#status")
.addClass("success")
.html("Data saved successfully")
.fadeIn('fast')
.delay(3000)
.fadeOut('slow');
}
else
{
$("#status")
.addClass("error")
.html("An error occured, the data could not be saved")
.fadeIn('fast')
.delay(3000)
.fadeOut('slow');
}
}
});
});
$("#editable").click(function (e) {
$("#save").show();
e.stopPropagation();
});
$(document).click(function() {
$("#save").hide();
});
});
</script>
</head>
<body>
<div id="wrap">
<h1><a href="http://gazpo.com/2011/09/contenteditable/" > HTML5 Inline text editing and
saving </a></h1>
<h4>The demo to edit the data with html5 <i>contentEditable</i>, and saving the changes
to database with PHP and jQuery.</h4>
<div id="status"></div>
<div id="content">
<div id="editable" contentEditable="true">
<?php
//get data from database.
include("db.php");
$sql = mysql_query("select text from content where element_id='1'");
$row = mysql_fetch_array($sql);
echo $row['text'];
?>
</div>
<button id="save">Save</button>
</div>
<div id="footer">
<a href="http://gazpo.com/">Tutorial by gazpo.com</a>
</div>
</div>
</body>
</html>
保存.PHP
<?php
include("db.php");
$content = $_POST['content']; //get posted data
$content = mysql_real_escape_string($content); //escape string
$sql = "UPDATE content SET text = '$content' WHERE element_id = '1' ";
if (mysql_query($sql))
{
echo 1;
}
?>
数据库.PHP
<?php
//database connection
mysql_connect("test.test00.com:2400", "first_testuser", "pw") or die(mysql_error());
mysql_select_db("jorgea_testdb") or die(mysql_error());
?>
编辑：仍在寻找答案！编辑：删除旧问题并创建新问题以试图找到可以回答这个问题的人......