Question

我已经在这方面工作了将近4个小时，我无法正常工作。

我有一个带有textarea和下拉列表的表单。下拉数据来自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代码，用于从数据库中提取数据并在textarea上显示。

<?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;

?>

Answer 1

其他答案没有考虑到tinymce不是textarea。 tinymce用以前的html元素（通常是textarea）的内容创建一个满足的iframe，并将其放入iframe体中。以前的html元素变得隐藏。

这是解决方案。而不是调用解决textarea的代码：

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");

Answer 2

好的，这是我的骗子。

我花了几个小时研究这个，最后我想我可以通过创建一个新文本框来覆盖整个文本框，只需添加控件即可。所以这是我的工作

我的HTML

<div id="text1"><textarea id="textdescid" name="txt_desc" cols="60" rows="20"><strong>fdsfsdfsdfs</strong></textarea></div/>

我的Javascript

 var divbox=document.getElementById('text1');

     if(http.readyState == 4 && http.status == 200)  
     {  
         var response = http.responseText;  

         if(response.length > 0){
             divbox.innerHTML='<textarea id="textdescid2" name="txt_desc" cols="60" rows="20"><strong>tretdsgtdsfdsfdsf</strong></textarea>'
             tinyMCE.execCommand("mceRemoveControl", true, "textdescid");
             tinyMCE.execCommand("mceAddControl", true, "textdescid2");
         }  
     }

希望这可以帮助你们。当然，你有一些mod要做，因为我在静态输出上用来证明我的代码实际上有效。

Answer 3

尝试<textarea>VALUE</textarea>

<textarea id="pfdnote" name="notes" /><?php echo $row['stk_description'];?></textarea>

而不是

<textarea id="pfdnote" name="notes" value="<?php echo $row['stk_description']?>" /></textarea>

Answer 4

从选择标记

中删除它

onChange="updateThis(this)"

并替换此

<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>

与

<script>
jQuery(function(){
        $('select#option').live('change', function(){
             var selectedLakeName = $(this).val();

             $.ajax({
                 type:'get',
                 url: 'getNote.php',
                 data: {'lname':selectedLakeName},
                 success:function(ret)
                 {
                    $('#pfdnote').html(ret);
                 }

             });
        });
});
</script>

Answer 5

今天在类似的情况下，这对我很有用（tinymce version 4 +）

tinymce.get('textarea_id').setContent(your_new_content);

textarea_id是您的textarea的原始ID，而your_new_content是来自AJAX调用（或任何你想要的）的新内容

TinyMCE Documentation

使用TinyMCE编辑器无法使用Ajax填充textarea

5 个答案: