У меня есть базовое модальное диалоговое окно, содержащее экземпляр 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
});
При этом используется плагин JQuery для TinyMCE для загрузки редактора вдля всех текстовых областей с классом 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 : По совету Патриции я изменил событие закрытия моего диалога на следующее:
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.Тем не менее, при повторной инициализации диалога я все еще не могу набрать в новом экземпляре TinyMCE, с базовым кодом, похожим на мое последнее обновление.Похоже, это не связано с неправильным уничтожением предыдущего элемента.
Обновление: Последнее предложение Патриции состояло в том, чтобы переместить вызов ajax, который загружает форму в диалог, в.load (), а затем создайте диалоговое окно.Я попробовал это, и дела пошли на юг быстро.Удаленный контент содержит скрипт, который должен выполняться, следовательно, скрипт dataType для метода .ajax ().Метод .load () не имеет этой опции, и он действительно не понравился.Так что теперь я не уверен, что попробовать дальше.