【发布时间】：2011-12-31 09:06:31
【问题描述】：
我有一个基本的模式对话框，其中包含一个 TinyMCE 实例。此模式在每次打开时动态创建，对话框（和元素）在对话框关闭时被销毁和删除。
我第一次打开对话框时，一切都很好。表单加载（ajax 调用），uniform 应用于表单，TinyMCE 应用于 textarea。我可以很好地执行所有操作。随后我打开表单的所有时间都会重复这个过程，不同之处在于，虽然 TinyMCE 应用于文本区域，但我无法再在其中输入。
这是在点击链接时触发的方法：
$('<div id="perspDlg">').dialog({
title:'My Dialog',
width:900,
height:575,
modal:true,
create: function(){
$('span.ui-icon-closethick').html("");
},
close:function(){
$('form#myForm').unbind('submit');
$('textarea[name="discussion"]').tinymce().destroy();
$(this).html('').dialog('destroy');
setTimeout("$('#perspDlg').remove();",100);
},
open:function(){
var dlg = $(this);
$.ajax({
url:_cfcPath+'/lessons/myTemplate.cfm',
dataType:'script',
data:{id:id},
success:function(d,r,o){
dlg.html(d);
$('form#myForm').bind('submit',formHandler);
}
});
},
buttons:[
{text:'Save Form',
click:function(){
$('form#myForm').submit();
//$(this).dialog('close');
}},
{text:'Cancel',
click:function(){
$(this).dialog('close');
}}
]
});
当模板加载时，最后几行将 TinyMCE 应用到加载表单中的文本区域：
$('textarea.tinyMCE').tinymce({
script_url : '/assets/scripts/_lib/tiny_mce/tiny_mce.js',
mode : "textareas",
editor_deselector : "mceNoEditor",
theme : "advanced",
plugins : pluginVal,
//Paste options
extended_valid_elements : "a[name|href|target|rel|title|style|class],div[align|class|style|height|width],form[accept|accept-charset|action|class|dir<ltr?rtl|enctype|id|lang|method<get?post|name|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onreset|onsubmit|style|title|target],hr[class],span[align|class|style],img[class|src|style|alt|title|name],input[accept|accesskey|align<bottom?left?middle?right?top|alt|checked<checked|class|dir<ltr?rtl|disabled<disabled|id|ismap<ismap|lang|maxlength|name|onblur|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onselect|readonly<readonly|size|src|style|tabindex|title|type<button?checkbox?file?hidden?image?password?radio?reset?submit?text|usemap|value],table[border|class|style|cellpadding|cellspacing|background|height|width],td[background|style|class|valign|align|height|width],p",
invalid_elements: "font,align,script,applet,iframe",
paste_auto_cleanup_on_paste : true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: true,
paste_retain_style_properties: "none",
paste_block_drop: true,
remove_linebreaks : false,
paste_create_paragraphs : false,
paste_create_linebreaks : false,
relative_urls : false,
remove_script_host : false,
document_base_url : baseURL,
theme_advanced_buttons1 : btn1Val,
theme_advanced_buttons2 : btn2Val,
theme_advanced_buttons3 : btn3Val,
theme_advanced_buttons4 : btn4Val,
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_resizing : true
});
这使用 TinyMCE 的 JQuery 插件将编辑器加载到具有 tinyMCE 类的所有文本区域中，按预期工作。
我在 StackOverflow 上阅读了几个关于类似问题的不同问题，但没有一个提供此问题的答案。有人有什么想法吗？
一些跟进：我在初始对话框打开和后续打开之间进行了一些输出比较，并注意到了一些东西。在初始加载中，TinyMCE 被应用于文本区域，我看到应用程序创建了一个 iframe，加载了一个包含菜单行的表格和一个带有附加 iframe 的行。 iframe 的内容（首次加载时）如下所示：
<tr class="mceLast">
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="mce_0_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 204px; display: block;">
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<base href="http://dev.nsite.loc">
<meta content="IE=7" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/themes/advanced/skins/default/content.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" data-mce-href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/spellchecker/css/content.css?110120111025" href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/spellchecker/css/content.css?110120111025">
<link rel="stylesheet" data-mce-href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/class_U/css/content.css?110120111025" href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/class_U/css/content.css?110120111025">
<link rel="stylesheet" data-mce-href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/noneprovided/css/content.css?110120111025" href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/noneprovided/css/content.css?110120111025">
<link rel="stylesheet" data-mce-href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/themes/advanced/skins/default/content.css?110120111025" href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/themes/advanced/skins/default/content.css?110120111025">
</head>
<body id="tinymce" class="mceContentBody " contenteditable="true" dir="ltr">
<br data-mce-bogus="1">
</body>
</html>
</iframe>
</td>
</tr>
但是，在随后的加载中，我得到了菜单，但内部 iframe 看起来像这样：
<tr class="mceLast">
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="mce_12_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 204px; display: block;">
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
</td>
</tr>
是什么原因造成的？
更新 2：根据 Patricia 的建议，我将对话的关闭事件更改为以下内容：
close:function(){
$('form#perspectiveForm').unbind('submit');
var id = $('textarea:tinymce').attr('id');
tinyMCE.execCommand('mceRemoveControl', false, id);
$('textarea#'+id).remove();
$(this).empty().dialog('destroy');
setTimeout("$('#perspDlg').remove();",100);
},
通过一些步骤调试和 FireBug，我已经确认编辑器已被销毁，然后 textarea 完全删除，然后再销毁对话框并删除 div。也就是说，重新初始化对话框我仍然无法输入新的 TinyMCE 实例，底层代码显示就像我上次更新一样。这似乎与对前一个元素的不当破坏无关。
更新： Patricia 的最后一个建议是将 ajax 调用（将表单加载到对话框中）移到 .load() 方法中，然后创建对话框。我试过这个，事情很快就向南了。远程内容包含必须执行的脚本，因此 .ajax() 方法上的脚本数据类型。 .load() 方法没有这个选项，它真的不喜欢它。所以现在我不确定下一步该尝试什么。
【问题讨论】：
-
你这里碰巧有 ajaxSetup 吗？
-
我没有。这里有很多 ajax，有很多不同的要求，所以我没有应用任何全局设置，因为每个实现都是不同的。
-
只是一件小事：data:{ id:id, }, 应该是 data:{ id:id },
-
我会纠正的。仅在此代码中。我在示例中删除/更改了一些次要代码（模板路径、数据键/值等）以保护我的雇主。