2

我已经为此工作了将近 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;

?>
4

6 回答 6

2

其他答案没有考虑到 tinymce 不是文本区域。tinymce 使用前一个 html 元素(通常是 textarea)的内容创建一个 contenteditable 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");
于 2012-11-13T10:56:35.783 回答
1

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

于 2012-11-12T10:17:18.070 回答
1

好的,这是我的作弊。

我花了几个小时来解决这个问题,最后认为我可以通过创建一个新的文本框来覆盖整个文本框,然后将控件添加到其中。所以这是我的工作

我的 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");
         }  
     } 

希望这可以帮助你们。当然,您需要做一些修改,就像我在静态输出上使用的那样,以证明我的代码确实有效。

于 2013-05-13T11:06:51.060 回答
0

从选择标签中删除它

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>
于 2012-11-12T10:38:38.470 回答
0

今天在类似的情况下,这对我非常有用(tinymce 版本 4+)

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

textarea_id你的 textarea 的原始 ID在哪里,your_new_content是来自 AJAX 调用(或任何你想要的)的新内容

TinyMCE 文档

于 2017-08-27T14:51:43.173 回答
0
<textarea id="editor" name="editor" type="text"></textarea>

 tinyMCE.triggerSave();
    var content = $("textarea[name=editor]").val();
    var formData = new FormData();
    formData.append("content", content);


 $.ajax({
            url: '../boot/newBlog.php',
            method: 'POST',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                switch (response){
                  
                }
              }
        });
于 2021-08-27T05:16:34.593 回答