Completely Reload TinyMCE

I have been writing a CMS for a while now and am currently putting the last few touches on it. one of which includes using ajax to deliver a tinyMCE editor in a lightbox styled window.

when it is loaded, the first time it works perfectly, but when i do it the second time or more, the element names get messed up and it doesn't send data back, or display the current value in the TinyMCE window. When I use Chrome to inspect the element, I can see that the span that contains the previous tinyMCE window is still there.

I use document.body.removeChild to remove the div that is holding it. Does anyone have any ideas?

Addition:

when AJAX gets back from making the request (it has all the html code of what goes in the window), it creates开发者_如何转开发 a new div element and uses document.body.appendChild to add the element to the document and puts the html code into the div tag.

Then it travels through the new code and searches for the scripts in that area (of which one is the MCE initiator) and appends them to the head so they are executed.

if the user clicks cancel rather than save, it removes the div tag by using: document.body.removeChild(document.getElementById("popupbox")); which works fine,

however when i bring up popup and repopulate as said before, and inspect the elements there, there is still a span there which was created by TinyMCE and the naming has been changed (instead of being identified by 'content', it is now 8 for some reason) and there is no content in the editor region.

I have used: tinyMCE.execCommand('mceRemoveControl',true,'mce{$Setting['name']}'); tinyMCE.editors[0].destroy();

but neither of them work. They return the tinymce window to a textarea, but the elements are still there.

Removing the editor as you described (using the correct tinymce editor id) before moving or removing the html element holding the tinymce iframe is a good choice. Where do you load your tinymce.js? If you deliver it using ajax i think it might be better to load it on the parent page(!). Some more code would be helpfull.

EDIT: I remember a situation where i had to remove a leftover span. Here is my code for this:

        // remove leftover span
        $('div .mceEditor').each(function(item){

            if (typeof $(this).attr('style') !== "undefined" ){
                $(this).removeAttr('style'); // entfernt "style: none";
            }
            else {
                $(this).remove();
            }
        });