What should I do with tinyMCE when replacing sections of the DOM using ajaxSubmit?

Question

On a multi-tab page, some tabs submit process changes the content of other tabs through an ajaxSubmit. If the other tab contains active tinyMCE edits what should I do to that tab before replacing it's content and what should I do (if anything) after the replacement?

Currently the code performs tinyMCE.execCommand("mceRemoveControl", true, ed_id); on all editors in the target tab and relies on the normal functionality of the system to bring them back after the change. Is that all that is necessary? I am experiencing obscure exceptions within the tinyMCE code after the change but it is difficult to discover the cause.

The error itself is SCRIPT5022: IndexSizeError - tiny_mce.js (1,78075) but I doubt that is specifically relevant.

TinyMCE v3.4.5

Answer 1

As i said in my Comments TinyMCE does not play well with AJAX there are loads of problems with it i have tried many times to get it to work.

In the end i switched to CKEditor so if you would like to try and use it you can here is the code you need for the ajaxSubmit() options

beforeSubmit:function{
   for(var instanceName in CKEDITOR.instances) {
        try{
            CKEDITOR.instances[instanceName].destroy();
        }catch(e){
        }
    }
}

the above code will remove CKEditor cleanly before you submit the following is how to re-inistialize CKEditor when your ajax has finished again this is a option for ajaxSubmit():

success:function(){
    // do what you need to update your DOM and then final call is
    $("editorSelector").ckeditor(options);
}