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

Posted

技术标签:

【中文标题】TinyMCE 在 http 请求 xhr ajax 生成的页面中不起作用【英文标题】:TinyMCE not working in http request xhr ajax generated page 【发布时间】: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,但听起来你理解我的问题。我将如何实现这一点? 【参考方案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();

现在可以正常使用了。

【讨论】:

以上是关于TinyMCE 在 http 请求 xhr ajax 生成的页面中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

在事件处理程序中发送没有 XHR 的 http 请求

数据交互 http请求 xhr

无法在 React Native 中获取或向 http URL 发出 XHR 请求(但 https 和 http://localhost 工作正常)

中止 DoJo XHR 请求

Laravel Fortify 不响应 HTTP 代码而是响应实际路由,即使我将注册请求作为 XHR 发送

xhr 请求控制源