Question

所以我有一个页面，其中包含调用httpRequest的链接。该请求调用一个php文件，该文件从mysql中获取数据并预先填充一个表单，然后将该表单返回到浏览器/网页。我的问题是当页面通过httpRequest / ajax返回到浏览器时，文本区域不显示tinymce编辑器，它只显示一个普通的文本区域。看起来我的请求和ajax工作正常文本区域没有tinycme编辑器。

当我不使用ajax时它工作正常但是当我把它放在一个单独的文件中并通过ajax调用它时它没有引入tinymce编辑器。

有没有人知道如何解决这个问题，以便我的ajax生成的页面显示带有tinymce编辑器的文本区域。谢谢。

Answer 1

让我们假设您的thinyMCE实例已使用以下代码进行初始化

// initialize tinyMCE in page
tinyMCE.init({
    mode: "textareas",
    theme: "advanced"
});

你在页面的某个地方有某种按钮。为了这个提示的目的，我不会给它任何ID，但你可以。现在，使用jQuery，您可以轻松地将事件处理程序附加到该按钮，该按钮将通过AJAX调用您的服务器并获取您想要放置tinyMCE编辑器的内容。做这样工作的代码看起来就像下面一样。

$(function() {

    $("button").bind("click", function() {
        var ed = tinyMCE.get('content');
        ed.setProgressState(1); // Show progress
        $.getJSON('/page/12.json', { /* your data */
        }, function(data) {
            ed.setProgressState(0); // Hide progress
            ed.setContent(data["body"]);

        }
        });
    });
});

你可以看到，在button.click上，ajax将调用url /page/12.json，它将返回JSON作为响应。最低限度的回应可能是：

{
   title: "Page title",
   body: "<html><head><title>Page title</title>......</html>"
}

我附加了匿名函数作为回调，它将处理来自服务器的响应。并隐藏在ajax调用之前显示的进度指示器。

关于JSON

JSON缩短了JavaScript Object Notation。这是JavaScript代码!!!所以不要对此感到困惑。使用JSON，您可以创建javascript对象，该对象可以具有稍后可以在代码中使用的属性，以访问该对象“保留”的特定数据。如果它更容易，您可以将其视为某种数据结构。

无论如何，要向您展示如何手动创建这个JSON，请看下面的示例

var data = new Object();
data.title = "Page title";
data.body = "<html....";

或

var data = {
    title: "page title",
    body: "<html...."
};

这是完全相同的事情。

如果您想了解有关JSON的更多信息，请将浏览器指向http://json.org。

=====替代=====

json解决方案的替代方案可能只是对服务器的平面ajax调用，响应可以是纯HTML（从你的问题我可以假设你已经有类似的东西）。因此调用$.getJSON的instad你可以使用$.get(url, callback);做同样的事情。我的答案顶部的代码不会发生显着变化。而不是在响应中生成JSON，您将获得HTML的字符串。

-----------底线-------

我更喜欢JSON，因为稍后可以使用其他属性轻松扩展它，因此以后不会有任何痛苦的代码更改;）

Answer 2

这里的问题是当你返回整个页面并使用ajax响应渲染它时，你的tinymce实例之前还没有被关闭。为此，您可以在呈现ajax响应之前调用这一小段代码：

tinymce.execCommand('mceRemoveControl',true,'editor_id');

在这种情况下，编辑器应该正确初始化。在关闭第一个之前，不允许初始化具有相同id的tinymce编辑器。

Answer 3

奇怪的是我昨天遇到了这个问题。以下代码应该可以工作，但是YMMV。诀窍是使用ajax events中的正确步骤。我使用了Regular TinyMCE并使用了已经包含的jQuery库。

下面进入你的tinyMCE初始化tinyMCE.init()。以下所有块都应在document.ready之外。

 myTinyInit = {
     //.......All essential keys/values ...........

      setup : function(ed) {
                 ed.onChange.add(function( ed ) {
                       tinyMCE.triggerSave();
                }) }
     //.....................

 };
 // Init the tinyMCE 
 tinyMCE.init(myTinyInit);

这可确保将内容定期保存到保存值的textarea上。下一步是设置请求事件。

ajax发布之前通常tinyMCE mceAddControl和ajax成功之后的mceRemoveControl应该可以解决问题。但我发现通常不起作用。

在我的例子中，我使用了表单作为jQuery选择器。

jQuery( '.myForm' )
.find( 'textarea#myTextArea' )
.ajaxStart(function() {
   // If you need to copy over the values, you can do it here.
   // If you are using jQuery form plugin you can bind to form-pre-serialize event instead.        
   // jQuery( this ).val( tinyMCE.get( jQuery( this ).attr( 'id' )).getContent() );

}).ajaxSend( function() {

    // ! - step 2 
    // My case was multiple editors.
    myEds = tinyMCE.editors;
    for( edd in myEds ) {
       myEds[ eds ].remove();
    } 

    // tinyMCE.get( 'myTextarea' ).remove(); 
    // strangely mceRemoveControl didnt work for me. 
    // tinyMCE.execCommand( 'mceRemoveControl', false, jQuery( this ).attr('id')); 

}).ajaxSuccess(function() {

    // Now we got the form again, Let's put up tinyMCE again.
    txtID = jQuery( this ).attr( 'id' );

    // ! - step 3 
    tinyMCE.execCommand( 'mceAddControl', false, txtID ); 


    // Restore the contents into TinyMCE. 
    tinyMCE.get( txtID ).setContent( jQuery( this ).val());

});

我遇到的问题：

使用mceRemoveControl始终会给我r is undefined错误。
如果你得到一个空白的tinyMCE编辑器，检查DOM是否用mce_02之类的东西替换了textarea的ID，这意味着TinyMCE再次被初始化或者订单有问题。如果是这样，则每次保存都会复制tinyMCE。
如果您是JS的新手，我建议将jQuery与form插件一起使用，对您来说可能更容易。但是请使用常规的非jquery tinyMCE，因为它有详细记录。

Answer 4

我通过在ajax调用之后调用函数来解决这个问题。在我的ajax的这一部分：

if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("Content").innerHTML=xmlhttp.responseText;
     tinymce();

现在工作正常。

TinyMCE无法在http请求xhr ajax生成的页面中工作

4 个答案: