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

Question

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

我有一个基本的模态对话框,包含一个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');
        }}
    ]
});

Run Code Online (Sandbox Code Playgroud)

加载模板时,最后一行将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
});

Run Code Online (Sandbox Code Playgroud)

这使用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>

Run Code Online (Sandbox Code Playgroud)

但是,在后续加载中我得到菜单,但内部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>

Run Code Online (Sandbox Code Playgroud)

可能导致什么？

更新2:Per 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);
},

Run Code Online (Sandbox Code Playgroud)

通过一些步骤调试和FireBug,我已经确认编辑器被销毁,然后在销毁对话框并删除div之前完全删除了textarea.也就是说,重新初始化对话框我仍然无法输入新的TinyMCE实例,底层代码显示为我上次更新.它似乎与前一个元素的不当破坏无关.

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

Answer 1

Pat*_*cia 1

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

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

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

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

});

Run Code Online (Sandbox Code Playgroud)

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

close: function (ev, ui) {
            if (typeof tinyMCE != 'undefined') {
                $(this).find(':tinymce').remove();
            }
            $(this).dialog("destroy");
            $(this).remove();



        }

Run Code Online (Sandbox Code Playgroud)

其中任何一项都可以解决您的问题！

编辑：

我不知道这是否是问题所在，但是：

 $(this).html('').dialog('destroy');

Run Code Online (Sandbox Code Playgroud)

执行 .html('') 并不能很好地清理问题。你应该使用 .empty() 代替。也许有一些流浪处理者或某些东西没有完全清理干净。

您可能还想尝试添加 $(this).remove(); 给你的亲密处理者。

归档时间：	14 年，3 月前
查看次数：	6584 次
最近记录：	10 年，2 月前