为什么我不能在jQueryUI模态对话框中输入TinyMCE? [英] Why can't I type in TinyMCE in my jQueryUI modal dialog?
问题描述
我有一个基本的模态对话框，其中包含TinyMCE的实例.每次打开时都会动态创建此模态，并且在关闭对话框时会销毁并删除对话框(和元素).
我第一次打开对话框，一切都很好.表单加载(ajax调用)，将统一应用于表单，并将TinyMCE应用于文本区域.我可以执行所有操作.随后的所有我打开表格的过程都会重复一次，不同之处在于，尽管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，我已经确认编辑器已销毁，然后在删除对话框并删除div之前完全删除了textarea.就是说，重新初始化对话框后，我仍然无法键入新的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();.交给您的贴身服务人员.
I have a basic modal dialog, containing an instance of TinyMCE. This modal is dynamically created each time it is opened, and the dialog (and element) are destroyed and removed on dialog close.
The first time I open the dialog, all is well. The form loads (ajax call), uniform is applied to the form, and TinyMCE is applied to the textarea. I can perform all actions fine. All of the subsequent times I open the form the process repeats itself, with the difference being that, though TinyMCE is applied to the textarea I can no longer type in it.
This is in a method that fires on link click:
$('<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');
}}
]
});
When the template loads, the final lines apply TinyMCE to the textarea in the loaded form:
$('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
});
This uses the JQuery plugin for TinyMCE to load the editor in to all textareas with a class of tinyMCE, which works as intended.
I have read several different Questions on StackOverflow on similar issues, but none that have provided an answer to this issue. Anybody have any ideas?
Some follow up: I did some output comparison between the initial dialog open, and subsequent openings, and noticed something. In the initial load, and TinyMCE being applied to the text area, I see that the application has created an iframe, loaded a table with a row for the menu and a row with an additional iframe. That iframe's content (on first load) looks like this:
<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>
But, on subsequent loads I get the menu, but that internal iframe looks like this:
<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>
What might cause that?
Update 2: Per Patricia's suggestions, I changed my dialog's close event to the following:
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);
},
With some step debugging, and FireBug, I have confirmed that the editor is destroyed, and then the textarea completely removed, prior to destroying the dialog and removing the div. That said, reinitializing the dialog I am still unable to type in the new TinyMCE instance, with the underlying code showing like my last update. It doesn't appear to be related to improper destruction of the previous element.
Update: Patricia's last suggestion was to move the ajax call, that loads the form into the dialog, into a .load() method, and then create the dialog. I tried this, and things went south quickly. The remote content contains script that must execute, hence the script dataType on the .ajax() method. The .load() method doesn't have this option, and it really didn't like it. So now I'm not sure what to try next.
i've run into a similar problem when i use a button to refresh a section.
you have to completely destroy the tinyMCE controls before you re-instantiate them.
i use this logic in my refresh button handler:
$('#sectionToRefresh').find('textarea:tinymce').each(function(){
var id = $(this).attr('id');
tinyMCE.execCommand('mceRemoveControl', false, id);
$(this).remove();
});
for dialogs, i have the "close" handler set up like this:
close: function (ev, ui) {
if (typeof tinyMCE != 'undefined') {
$(this).find(':tinymce').remove();
}
$(this).dialog("destroy");
$(this).remove();
}
Either one of these should fix the problem for you!
EDIT:
I have no idea if this is the propblem or not, but :
$(this).html('').dialog('destroy');
doing .html('') doesn't clean things up nicely. you should use .empty() instead. perhaps there is some stray handlers or something not being completely cleaned up.
you may also want to try adding the $(this).remove(); to your close handler.
这篇关于为什么我不能在jQueryUI模态对话框中输入TinyMCE?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
