我已经为此工作了近 4 个小时，但无法成功。
我有一个带有文本区域和下拉列表的表单。下拉数据来自MySQL数据库。当我选择下拉列表中的项目时，它确实会填充文本区域中的数据，并且工作正常。
现在我添加了一个 TinyMCE 作为文本区域编辑器，但现在数据不会显示。我知道 TinyMCE 取代了文本区域，但我无法让它工作。
下面是我正在使用的完整代码。谁能帮我解决我所缺少的内容，使其在启用 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;
?>
最佳答案
其他答案没有考虑到tinymce不是文本区域。 tinymce 使用前一个 html 元素(通常是文本区域)的内容创建一个内容可编辑的 iframe，并将其放入 iframe 主体中。前一个 html 元素将被隐藏。
这是解决方案。而不是调用处理文本区域的代码:
document.getElementById("pfdnote").innerHTML=xmlhttp.responseText;
您需要解决tinymce(并使用其API iframe 的主体)。使用这个
tinymce.get('pfdnote').setContent(xmlhttp.responseText);
此外，您应该注意调用
tinyMCE.execCommand("mceAddControl", true, "pfdnote");
第二次不使用mceRemoveControl并关闭编辑器将导致错误/问题。您应该检查编辑器是否已经存在，并且仅当它未初始化时:
if (!tinymce.get('pdfnote')) tinyMCE.execCommand("mceAddControl", true, "pfdnote");
关于php - 无法使用 TinyMCE 编辑器通过 Ajax 填充文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13341568/