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 生成的页面中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
无法在 React Native 中获取或向 http URL 发出 XHR 请求(但 https 和 http://localhost 工作正常)