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

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

当我不使用ajax时，它工作得很好，但是当我将它放在一个单独的文件中并通过ajax调用它时，它不会引入tinymce编辑器

---

有人知道如何解决这个问题，使我的ajax生成的页面用tinymce编辑器显示文本区域吗。多谢各位

这里的问题是，当您返回整个页面并使用ajax响应呈现它时，您的tinymce实例以前从未关闭过。 为了做到这一点，您可以在呈现ajax响应之前调用这段代码：

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

---

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

这里的问题是，当您返回整个页面并使用ajax响应呈现它时，您的tinymce实例以前从未关闭过。 为了做到这一点，您可以在呈现ajax响应之前调用这段代码：

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

---

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

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

下面是tinyMCE初始化

tinyMCE.init（）

。下面的所有块都应位于

文档的外部。就绪

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

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

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

这样可以确保内容定期保存到保存值的文本区域。下一步是设置请求事件

通常情况下，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未定义

持续错误

如果您得到一个空的tinyMCE编辑器，请检查DOM文本区域的ID是否被替换为类似于

mce_02

的内容，这意味着tinyMCE正在重新初始化，或者顺序有问题。如果是，则每次保存时都会复制tinyMCE

如果您是JS新手，我建议您在插件中使用jQuery，这可能会更容易。但是一定要使用常规的非jquery tinyMCE，因为它有很好的文档记录

---

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

下面是tinyMCE初始化

tinyMCE.init（）

。下面的所有块都应位于

文档的外部。就绪

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

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

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

这样可以确保内容定期保存到保存值的文本区域。下一步是设置请求事件

通常情况下，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未定义

持续错误

如果您得到一个空的tinyMCE编辑器，请检查DOM文本区域的ID是否被替换为类似于

mce_02

的内容，这意味着tinyMCE正在重新初始化，或者顺序有问题。如果是，则每次保存时都会复制tinyMCE

如果您是JS新手，我建议您在插件中使用jQuery，这可能会更容易。但是一定要使用常规的非jquery tinyMCE，因为它有很好的文档记录

---

让我们假设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"]);

        }
        });
    });
});

您可以在按钮上看到。单击ajax将调用url

/page/12.json

，它将返回json作为响应。这种反应的最低限度可能是：

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

{
标题：“页面标题”，
正文：“页面标题……”
}

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

关于JSON

JSON是JavaScript对象表示法的缩写。这是JavaScript代码！！！所以不要对此感到困惑。使用JSON，您可以创建javascript对象，该对象可以具有稍后在代码中使用的属性，以访问该对象“持有”的特定数据。如果更容易理解，可以将其视为某种数据结构

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

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

var data=newobject（）；
data.title=“页面标题”；
data.body=“假设thinyMCE实例已使用下面的代码初始化

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

在页面的某个地方有一些按钮。出于本技巧的目的，我不会给它任何ID，但您可以。现在，使用jQuery，您可以轻松地附加事件处理程序