TinyMCE 在 http 请求 xhr ajax 生成的页面中不起作用答案

【问题标题】：TinyMCE not working in http request xhr ajax generated pageTinyMCE 在 http 请求 xhr ajax 生成的页面中不起作用
【发布时间】：2011-12-22 21:59:08
【问题描述】：

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

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

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

【问题讨论】：

如果 httpRequest 响应是 html，您将用旧替换而不是重新初始化 ThinyMCE，但我建议您使用 JSON 作为响应并更新 textarea 的值
你能详细说明一下吗？我从未使用过 JSON，但听起来你理解我的问题。我将如何实现这一点？

标签： ajax tinymce textarea xmlhttprequest

【解决方案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，您还可以使用$.get(url, callback); 来做同样的事情。我的答案顶部的代码不会发生巨大变化。您将获得 HTML 字符串，而不是获取 JSON 作为响应。

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

我更喜欢 JSON，因为它以后可以很容易地用其他属性扩展，所以以后没有痛苦的代码更改；）

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我是一个新手，不知道我把这段代码放在哪里。我有三个文件，wepage，我的 js 脚本，它调用一个 php 页面并将结果返回到网页。我将此代码放在哪个文件中以及在文件中的位置。这一点代码也放在脚本标签中吗？谢谢。
你需要在“mceAddControl”调用之前将它放在 ajax-success 函数中

【解决方案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);

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

通常在 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 是否将 textarea 的 ID 替换为 mce_02 之类的东西，这意味着 TinyMCE 正在重新初始化或命令有问题。如果是这样，则每次保存都会复制 tinyMCE。
如果您是 JS 新手，我建议您使用带有 form 插件的 jQuery，这对您来说可能更容易。但是请使用常规的非 jquery tinyMCE，因为它有据可查。

【讨论】：

【解决方案4】：

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

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

现在可以正常使用了。

【讨论】：