Firefox和TinyMCE 3.4.9不能很好地协同工作

时间:2012-03-27 21:19:21

标签: ajax firefox tinymce jquery-dialog

我向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

所以,如果有人可以解决这个问题,那将有助于这种情况发生。我试过了没有运气的建议。

编辑:我原本以为这只影响了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控件!

1 个答案:

答案 0 :(得分:0)

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

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