Question

I’ve submitted a bug to the tinyMCE people, but i’m hoping someone else has come across this and has a suitable workaround.

Here’s the situation:
I’ve got a form with a tinyMCE control that i load into a jquery dialog. it works great the first time, then after they close it, and open a new one. any interaction with the tinyMCE control gives:

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

it also doesn’t fill the control with the text it’s supposed to be prepopulated with.

In my jquery dialogs i have the following scripts in my beforeClose handler:

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();
                });
            }

and here’s my tinyMCE setup script:

$('#' + 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();
                }
            })
        }
    });

is there anything obvious here? i’ve got all that complicated removal stuff in the close b/c tinymce doesn’t like having it’s html removed without it being removed.

the setInitialContent() stuff is just so i can pre-load it with their email signature if they have one. it’s broken with or without that code so that’s not the problem.

i was forced to update to 3.4.9 because of this issue:

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

so if someone can solve that, it would help this situation to. I have tried the suggestion from aknosis with no luck.

EDIT: I originally thought this only affected firefox 11, but i have downloaded 10, and it is also affected.

EDIT: Ok, i’ve trimmed down all my convoluted dynamic forms and links that cause this into a fairly simple example.

the code for the base page:

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

and the code for the page that is loaded into the dialog:

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

a very interesting thing i noticed, if i move the tinyMCE setup into the load callback, it seems to work. this isn’t really a solution though, because when i’m loading dialogs, i don’t know in the code ahead of time if it has tinyMCE controls or not!

Answer 1

i solved this by moving the tinyMCE setup into a function, and then in my load() calls, checking if that function exists, and then calling it.

not the best solution, but it works.