Question

我有一个基本的模态对话框，其中包含一个TinyMCE实例。每次打开时都会动态创建此模态，并在对话框关闭时销毁和删除对话框（和元素）。

我第一次打开对话框时，一切都很顺利。表单加载（ajax调用），uniform应用于表单，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，我已经确认编辑器被销毁，然后在销毁对话框并删除div之前完全删除了textarea。也就是说，重新初始化对话框我仍然无法输入新的TinyMCE实例，底层代码显示为我上次更新。它似乎与前一个元素的不当破坏无关。

更新：Patricia的最后一个建议是将ajax调用（将表单加载到对话框中）移动到.load（）方法中，然后创建对话框。我试过这个，事情很快就消失了。远程内容包含必须执行的脚本，因此.ajax（）方法上的脚本为dataType。 .load（）方法没有这个选项，它真的不喜欢它。所以现在我不确定下一步该尝试什么。

Answer 1

当我使用按钮刷新某个部分时，我遇到了类似的问题。

在重新实例化之前，你必须完全销毁tinyMCE控件。

我在刷新按钮处理程序中使用此逻辑：

$('#sectionToRefresh').find('textarea:tinymce').each(function(){
     var id = $(this).attr('id');
     tinyMCE.execCommand('mceRemoveControl', false, id);
     $(this).remove();

});

对于对话框，我有“关闭”处理程序设置如下：

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（）;到你的近距离处理程序。

Answer 2

这对我有用。

$('.jq_tinymce').each(function(idx, el)
    {
        toggle_editor('textarea[name="'+ $(this).attr('name') +'"]', $(this).data('tinymce_theme'));
    });

您只需在打开对话框后运行此代码即可。我正在使用jq_tinymce来让它知道init的哪个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
    });
}

}

Answer 3

我必须确保在对话框配置后执行了我的tinymce init。这解决了我的问题。

 $("#editDialog").dialog({
               ...           
            });
            tinymce.init({
                selector: '#txtCourseDesc'
            });
            $('#editDialog').show();

为什么我不能在我的jQueryUI模式对话框中键入TinyMCE？

3 个答案: