ajax - Firefox 和 TinyMCE 3.4.9 不能一起玩

Question

我已经向 tinyMCE 人员提交了一个错误，但我希望其他人已经遇到过这个问题并且有一个合适的解决方法。

情况是这样的:我有一个带有 tinyMCE 控件的表单，我将其加载到 jquery 对话框中。第一次效果很好，然后在他们关闭它并打开一个新的之后。与 tinyMCE 控件的任何交互都会给出:

"Node cannot be used in a document other than the one in which it was created" 

它也没有用应该预先填充的文本填充控件。

在我的 jquery 对话框中，我的 beforeClose 处理程序中有以下脚本:

if (typeof tinyMCE != 'undefined') {
                $(this).find(':tinymce').each(function () {
                    var theMce = $(this);

                    tinyMCE.execCommand('mceFocus', false, theMce.attr('id'));
                    tinyMCE.execCommand('mceRemoveControl', false, theMce.attr('id'));
                    $(this).remove();
                });
            }

这是我的 tinyMCE 安装脚本:

$('#' + controlId).tinymce({
        script_url: v2ScriptPaths.TinyMCEPath,
        mode: "none",
        elements: controlId,
        theme: "advanced",
        plugins: "paste",
        paste_retain_style_properties: "*",
        theme_advanced_toolbar_location: "top",
        theme_advanced_buttons1: "bold, italic, underline, strikethrough, separator, justifyleft, justifycenter, justifyright, justifyfull, indent, outdent, separator, undo, redo, separator, numlist, bullist, hr, link, unlink,removeformat",
        theme_advanced_buttons2: "fontsizeselect, forecolor, backcolor, charmap, pastetext,pasteword,selectall, sub, sup",
        theme_advanced_buttons3: "",
        language: v2LocalizedSettings.languageCode,
        gecko_spellcheck : true,
        onchange_callback: function (editor) {
            tinyMCE.triggerSave();
        },
        setup: function (editor) {
            editor.onInit.add(function (editor, event) {
                if (typeof v2SetInitialContent == 'function') {
                    v2SetInitialContent();
                }
            })
        }
    });

这里有什么明显的吗？我已经在关闭 b/c tinymce 中得到了所有复杂的删除内容，不喜欢在没有删除的情况下删除它的 html。

setInitialContent() 的东西只是为了让我可以用他们的电子邮件签名预加载它(如果他们有的话)。无论是否使用该代码，它都会被破坏，所以这不是问题。

因为这个问题，我被迫更新到 3.4.9:

http://www.tinymce.com/forum/viewtopic.php?id=28400

所以如果有人能解决这个问题，那将有助于解决这个问题。我已经尝试过来自 aknosis 的建议，但没有成功。

编辑:我原本以为这只影响 firefox 11，但我已经下载了 10，它也受到了影响。

编辑:好的，我已经将导致此问题的所有复杂的动态表单和链接缩减为一个相当简单的示例。

基页代码:

<a href="<%=Url.Action(MVC.Temp.GetRTEDialogContent)%>" id="TestSendEmailDialog">Get Dialog</a>
<div id="TestDialog"></div>
<script type="text/javascript">
    $('#TestSendEmailDialog').click(function (e) {
        e.preventDefault();

        var theDialog = buildADialog('Test', 500, 800, 'TestDialog');
        theDialog.dialog('open');
        theDialog.empty().load($(this).attr('href'), function () {

        });

    });

    function buildADialog(title, height, width, dialogId, maxHeight) {
        var customDialog = $('#' + dialogId);

        customDialog.dialog('destory');

        customDialog.dialog({
            title: title,
            autoOpen: false,
            height: height,
            modal: true,
            width: width,
            close: function (ev, ui) {

                $(this).dialog("destroy");
                $(this).empty();

            },
            beforeClose: function (event, ui) {

                if (typeof tinyMCE != 'undefined') {
                    $(this).find(':tinymce').each(function () {
                        var theMce = $(this);

                        tinyMCE.execCommand('mceFocus', false, theMce.attr('id'));
                        tinyMCE.execCommand('mceRemoveControl', false, theMce.attr('id'));
                        $(this).remove();
                    });
                }

            }
        });

        return customDialog;

    }

</script>

以及加载到对话框中的页面代码:

<form id="SendAnEmailForm" name="SendAnEmailForm" enctype="multipart/form-data" method="post">
   <textarea cols="50" id="MessageBody" name="MessageBody" rows="10" style="width: 710px; height:200px;"></textarea>
</form>

<script type="text/javascript">

    $(function () {
        $('#MessageBody').tinymce({
            script_url: v2ScriptPaths.TinyMCEPath,
            mode: "exact",
            elements: 'MessageBody',
            theme: "advanced",
            plugins: "paste, preview",
            paste_retain_style_properties: "*",
            theme_advanced_toolbar_location: "top",
            theme_advanced_buttons1: "bold, italic, underline, strikethrough, separator, justifyleft, justifycenter, justifyright, justifyfull, indent, outdent, separator, undo, redo, separator, numlist, bullist, hr, link, unlink,removeformat",
            theme_advanced_buttons2: "fontsizeselect, forecolor, backcolor, charmap, pastetext,pasteword,selectall, sub, sup, preview",
            theme_advanced_buttons3: "",
            language: 'EN',
            gecko_spellcheck: true,
            onchange_callback: function (editor) {
                tinyMCE.triggerSave();
            }
        });
    });

</script>

我注意到一件非常有趣的事情，如果我将 tinyMCE 设置移动到加载回调中，它似乎可以工作。但这并不是真正的解决方案，因为当我加载对话框时，我无法提前在代码中知道它是否具有 tinyMCE 控件!

Answer 1

我通过将 tinyMCE 设置移动到一个函数中解决了这个问题，然后在我的 load() 调用中检查该函数是否存在，然后调用它。

不是最好的解决方案，但它有效。