我已经为此工作了将近 4 个小时,但我无法让它工作。
我有一个带有文本区域和下拉列表的表单。下拉数据来自 MySQL 数据库。当我在下拉列表中选择和项目时,它确实会在 textarea 中填充数据,并且工作正常。
现在我添加了一个 TinyMCE 作为 textarea 编辑器,但现在数据不会显示。我知道 TinyMCE 替换了 textarea 但我不能让它工作。
下面是我正在使用的完整代码。任何人都可以帮助我在启用 TinyMCE 的情况下使其正常工作。非常感谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,nonbreaking,xhtmlxtras,template,visualchars",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,|,forecolor,backcolor,|,tablecontrols,hr,removeformat,|,sub,sup",
theme_advanced_buttons2 : ",charmap,advhr,|,fullscreen,|,cite,abbr,acronym,|,visualchars,nonbreaking,|,cleanup,help,code",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
skin : "o2k7",
skin_variant : "silver"
});
</script>
<!-- JQUERY -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.autoSubmit = function(options) {
return $.each(this, function() {
// VARIABLES: Input-specific
var input = $(this);
var column = input.attr('name');
// VARIABLES: Form-specific
var form = input.parents('form');
var method = form.attr('method');
var action = form.attr('action');
// VARIABLES: Where to update in database
var where_val = form.find('#where').val();
var where_col = form.find('#where').attr('name');
// ONBLUR: Dynamic value send through Ajax
input.bind('blur', function(event) {
// Get latest value
var value = input.val();
// AJAX: Send values
$.ajax({
url: action,
type: method,
data: {
val: value,
col: column,
w_col: where_col,
w_val: where_val
},
cache: false,
timeout: 10000,
success: function(data) {
// Alert if update failed
if (data) {
alert(data);
}
// Load output into a P
else {
$('#notice').text('Updated');
$('#notice').fadeOut().fadeIn();
}
}
});
// Prevent normal submission of form
return false;
})
});
}
})(jQuery);
// JQUERY: Run .autoSubmit() on all INPUT fields within form
$(function(){
$('#ajax-form TEXTAREA').autoSubmit();
});
</script>
<!-- STYLE -->
<style type="text/css">
INPUT { margin-right: 1em }
</style>
<script language="JavaScript">
function updateThis(obj){
var option = document.getElementById('option').selectedIndex;
var option = document.getElementById('option').options[document.getElementById('option').selectedIndex].text;
//alert("running updateThis function and the variable named option is: " + option);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
tinyMCE.execCommand("mceAddControl", true, "pfdnote");
document.getElementById("pfdnote").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getNote.php?lname="+option,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?php
require("DB_connector.php");
require("Functions.php");
$stk = $stmt->prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_pfd WHERE stk_summary = 'sample data only'");
$stk->execute();
$row = $stk->fetchAll();
?>
<form id="ajax-form" class="autosubmit" method="POST" action="">
<textarea id="pfdnote" name="notes" value="<?php echo $row['stk_description']?>" /></textarea>
</form>
<p id="notice"></p>
<?php
$stk1 = $stmt->prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_stk");
$stk1->execute();
$stk2 = $stk1->fetchAll();
echo '<select id="option" onChange="updateThis(this)" lake="something">';
foreach ($stk2 as $d) {
echo '<option id="lname" value="'.$d['stk_id'].'">'.$d['stk_id'] . "+". $d['stk_name']." + ".$d['stk_type'].'</option>';
}
?>
<script>
jQuery(function(){
$('#option').change(function(){
var selectedLakeName = $('#option :selected').text();
});
});
</script>
</body>
</html>
这是从数据库中提取数据并在文本区域中显示的 getNote.php 代码。
<?php
$stk_id = $_GET['lname'];
require("DB_connector.php");
require("Functions.php");
$stk = $stmt->prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_pfd WHERE stk_id = '$stk_id'");
$stk->execute();
$r = $stk->fetchAll();
foreach ($r as $row) {
$stk_desc = $row['stk_description'];
}
echo $stk_desc;
?>