为什么我不能在我的jQueryUI模式对话框中输入TinyMCE？
我有一个基本的模式对话框，包含一个TinyMCE实例。 这种模式在每次打开时动态创建，对话框（和元素）在关闭对话框时被销毁并删除。
我第一次打开对话框，一切都很好。 表单加载（ajax调用），统一应用于表单，TinyMCE应用于textarea。 我可以很好地执行所有操作。 接下来的所有时间我都会打开该过程重复的形式，不同之处在于，虽然TinyMCE应用于textarea，但我无法再输入它。
这是一个链接点击的方法：
$('<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，并以加载的形式显示：
$('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插件将编辑器加载到所有textareas中，并带有一个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（）方法上的脚本dataType。 .load（）方法没有这个选项，它真的不喜欢它。 所以现在我不知道接下来要尝试什么。
当我使用按钮刷新一个部分时，我遇到了类似的问题。
在重新实例化之前，必须彻底销毁tinyMCE控件。
我在刷新按钮处理程序中使用这个逻辑：
$('#sectionToRefresh').find('textarea:tinymce').each(function(){
var id = $(this).attr('id');
tinyMCE.execCommand('mceRemoveControl', false, id);
$(this).remove();
});
对于对话框，我有这样设置的“close”处理程序：
close: function (ev, ui) {
if (typeof tinyMCE != 'undefined') {
$(this).find(':tinymce').remove();
}
$(this).dialog("destroy");
$(this).remove();
}
其中任何一个都应该为您解决问题！
编辑：
我不知道这是否是这个问题，但是：
$(this).html('').dialog('destroy');
做.html（''）不能很好地清理。 你应该使用.empty（）来代替。 也许有一些流浪的处理者或者没有被完全清理的东西。
您可能还想尝试添加$（this）.remove（）; 到你的亲密处理程序。
这对我有效。
$('.jq_tinymce').each(function(idx, el)
{
toggle_editor('textarea[name="'+ $(this).attr('name') +'"]', $(this).data('tinymce_theme'));
});
您只需在打开对话框后运行此代码即可。 我使用jq_tinymce让它知道要启动哪个textareas。 在html标签上使用data-tinymce_theme属性可以让你指定一个tinymce主题。
toggle_editor是
function toggle_editor(selector, theme)
{
if (theme == undefined)
{
theme = 'simple';
}
if($(selector+':first').css('display') == 'none')
{
$(selector).each(function(){
$(this).tinymce().hide();
})
}
else
{
$(selector).tinymce({
script_url : Vega.base_url+'ext/tinymce_3.5_jquery/tiny_mce.js',
// General options
theme : theme,
width: '100%',
language: Vega.tinyMceLocale,
plugins : "autolink,lists,pagebreak,style,layer,table,save,advimage,advlink,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
file_browser_callback : "tinymce_uploader",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,styleprops",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,|,print,|,fullscreen,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});
}
}
我必须确保在对话框配置后执行了我的tinymce init。 这解决了我的问题。
$("#editDialog").dialog({
...
});
tinymce.init({
selector: '#txtCourseDesc'
});
$('#editDialog').show();
上一篇: Why can't I type in TinyMCE in my jQueryUI modal dialog?
下一篇: TinyMCE attaches then disappears when using jquery modal dialog and MVC.net